JQuery - Add a mouse-event listener to a class

<div class="teamMain">
    <div class="teamScroll">
        PRIMO
    </div>

    <div class="teamScroll">
        SECONDO
    </div>

    <div class="teamScroll">开发者_Go百科;
        TERZO
    </div>
</div>

And i'd like to add a sort of listener (such mouseover or mouseout) for each of this div, by taking the class teamScroll as reference.

I know there is delegate method, but it works only with jquery-1.4.2 version (which, as posted time ago for another problem) broke some functions with IE6.

There is other way to do this without put N listener for N div?

Cheers

You can use a normal .hover() handler, like this:

$(".teamScroll").hover(function() {
  //mouse on the item
}, function() {
  //mouse off the item
});

That's the way that always works (but does 2n handlers like you're asking about), assuming 1.4.2 isn't an option...if you're on at least 1.3.2, there's .live() like this:

$(".teamScroll").live("mouseenter", function() {
  //mouse on the item
}).live("mouseleave", function() {
  //mouse off the item
});

The difference here is that .live() runs an extra selector and the event bubbles all the way up to document...as well as it actually maps to mouseover and mouseout under the covers, which is often undesirable.

Instead, I'd suggest the .delegate() route, and seeing if jQuery 1.4.4 fixes the issue you have in 1.4.2, there were several AJAX tweaks in 1.4.3/1.4.4.

Try

$('.teamScroll').bind('onmouseover', function() {
  alert('Mouseover');
});

$('.teamScroll').mouseover(function(){

});