CODEWITHSUNDEEP
javascriptjquerymouseover
BillyJ
BillyJ

Reputation: 53

JQuery - how to use the hover() event on a list of DIVs?

I have the following HTML:

<div id="panel">
  <div class="listing" id="ref_1">...</div>
  <div class="listing" id="ref_2">...</div>
  <div class="listing" id="ref_3">...</div>
  <div class="listing" id="ref_4">...</div>
</div>

What I should like to do is, when someone hovers over a div.listing, to alert() to the screen the id name.

Meaning, if a person hovers over with their mouse the id="ref_3", to alert("ref_3");

Question: How do I do this with JQuery/Javascript?

UPDATE:

Linked below is the live site. As you'll see, none of the answers below work. (Line 340)

http://tinyurl.com/ybbey4

Any recommendation?

Upvotes: 0

Views: 2159

Answers (6)

droo
droo

Reputation: 1059

The 'mouseenter' event is usually a better choice than 'mouseover'. From http://api.jquery.com/mouseenter/ :

"The mouseenter event differs from mouseover in the way it handles event bubbling. If mouseover were used in this example, then when the mouse pointer moved over the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseenter event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant."

jQuery('#panel div.listing').bind('mouseenter',function(){
  alert(this.id);
  return false;
});

Upvotes: 0

Jared
Jared

Reputation: 1793

Seems to work fine separate from your site...

I'd suggest just adding a div in the code with a hslisting class. Don't use JS to inject it. See if something about the way you are injecting it is causing problems.

http://jsbin.com/agosa works just fine.

Upvotes: 0

pixeline
pixeline

Reputation: 17974

$('.listing').bind('mouseover',function(){
alert($(this).attr('id'));
});

You can see this code working here.

UPDATE

looking at your code, you might want to try this instead:

$('.hlisting').live('mouseover',function(){
alert($(this).attr('id'));
});

Upvotes: 1

davidosomething
davidosomething

Reputation: 3437

better yet

$('#panel div.listing').mouseover(function() {
  alert($(this).attr('id'));
});

this works

<!DOCTYPE>
<html>
<head><title>test</title>
<style type="text/css">
.listing { width: 100px; height: 100px; border: 1px black solid; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.4.1");
  google.setOnLoadCallback(function() {
    $('#panel div.listing').mouseover(function() {
        alert($(this).attr('id'));
    });
  });
</script></head>
<div id="panel">
  <div class="listing" id="ref_1">...</div>
  <div class="listing" id="ref_2">...</div>
  <div class="listing" id="ref_3">...</div>
  <div class="listing" id="ref_4">...</div>
</div>
</body>
</html>

Upvotes: 0

theJBRU
theJBRU

Reputation: 817

BillyJ, it sounds like you maybe aren't loading up the jQuery library in your HTML file.

Be sure to include <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> in your file before calling the above function.

Upvotes: 0

user261346
user261346

Reputation:

Are you currently using $ as a function in other script file, and not using noConflict

Upvotes: 0

Related Questions