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.

div is not a non-block element, by the way.

Jacob
– Jacob

2009-11-21 10:12:47 +00:00
Commented Nov 21, 2009 at 10:12 — Jacob
– Jacob, Commented Nov 21, 2009 at 10:12

Piotr Rochala · Accepted Answer · 2009-11-21 10:09:37Z

3

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.

answered Nov 21, 2009 at 10:09

Piotr Rochala

7,8022 gold badges36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sindre Sorhus · Accepted Answer · 2013-01-28 10:22:08Z

2

Even shorter:

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

edited Jan 28, 2013 at 10:22

answered Nov 21, 2009 at 13:58

Sindre Sorhus

63.6k40 gold badges176 silver badges236 bronze badges

Comments

David Hellsing · Accepted Answer · 2009-11-21 10:12:23Z

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.

edited Nov 21, 2009 at 10:12

answered Nov 21, 2009 at 10:04

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

1 Comment

Trav L Over a year ago

I tested on all versions, not just IE6.

jitter · Accepted Answer · 2009-11-21 10:58:52Z

1

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

http://jsbin.com/uyopi

answered Nov 21, 2009 at 10:58

jitter

54.8k11 gold badges114 silver badges130 bronze badges

Collectives™ on Stack Overflow

Hover using jQuery

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related