Hover using jQuery

Question

Having a bit of problem debugging my jQuery code...

In order to allow hover effects on block elements (such as div) in IE, I want to use jQuery to do the trick instead of css. My jQuery code looks something like:

$(document).ready(function()
{
    $("div.foo").mouseover(function(){
            $("div.foo h3").addClass("hover");
        }).mouseout(function(){
            $("div.foo h3").removeClass("hover");
    });
});

This works as my header switch between h3 and h3.hover, BUT if I try to:

$(document).ready(function()
{
    $("div.bar").mouseover(function(){
            $(this).addClass("hover");
        }).mouseout(function(){
            $(this).removeClass("hover");
    });
});

This won't work in all versions of IE. Does it mean IE has trouble detecting multiple classes on 1 element (which is div.bar.hover)? Thanks in advance.

EDIT:

After examined the code, I realised the problem lies in a conflict with javascript curvycorners-2.0.4 (which is another IE hack) that were also applied to this element.

Answer 1

True, IE6 cant handle multiple classes in CSS, f.ex:

div.one.two{color:red}

wont work for <div class="one two">red</div>

Update: It might be a bubbling issue as well, try using the .hover helper http://docs.jquery.com/Events/hover to prevent that.

Answer 2

use toggleClass instead:

$(document).ready(function()
{
    $("div.bar").mouseover(function(){
            $(this).toggleClass("hover");
        }).mouseout(function(){
            $(this).toggleClass("hover");
    });
});

It will add class if not there, and remove if already applied.

And correct: div.bar.hover is not valid CSS selector for IE6. instead do something like that: #myPanel div.hover.

Answer 3

The sample provided by you works flawless in IE6 (can't check IE7/8). Check here

http://jsbin.com/uyopi

Answer 4

$('div.bar').hover(function(){
    $(this).toggleClass('hover');
},function(){
    $(this).toggleClass('hover');
});