CODEWITHSUNDEEP
jqueryinternet-explorergoogle-chromehover
Tiny Giant Studios
Tiny Giant Studios

Reputation: 1145

jQuery Hover and IE

I'm losing my hairline over something that's probably minute. If you compare this website in Chrome/Firefox with IE, you'll notice that if you hover over each entry, in Chrome/FF it'll get a slight green background whereas in IE, zilch/nada/zero/zippo...

Can anyone in the coding fraternity give some pointers? Admittedly, jQuery is not my strong point and this is the code what's powering the hover effect:

$('div.availableNowListing').hover( function() {
    $(this).addClass('focus');
}, function() {
    $(this).removeClass('focus');
});

and the CSS:

div.availableNowListingCatHeading {
    display: none;
    border: 1px solid #e6e6e6;
    margin-top: 20px;
    overflow: hidden;
    background-color: #efefef;}

div.availableNowListingCatHeading h3 {
    float: left;
    margin-left: 80px;
    margin-top: 20px;}

div.availableNowListingCatHeading img {
    margin: 5px;
    float: left;
    border: 1px solid #e3e3e3;}

.focus {
    background-color: #dbfcab;}

Thanks in advance for taking a peek at this :)

Upvotes: 2

Views: 5304

Answers (2)

fredrik
fredrik

Reputation: 17617

I would guess it's due that div.availableNowListing doesn't get any height since you're floating the elements inside div.availableNowListing.

Set css property overflow: hidden on div.availableNowListing and try it out.

..fredrik

Upvotes: 5

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195981

The problem is in the 

header = $(this).find('div.availableNowListingCatHeading');

line.

You have a div with id of header and that confuses IE (which treats the variable as a shortcut to the element.)
This cause the IE to try to assign something to en element which fails and stops your script there. (the focus class never gets assigned)

Just add var at the beginning (if you want to do something with it, or remove the line completely if it is a leftover)..

var header = $(this).find('div.availableNowListingCatHeading');

Upvotes: 4

Related Questions