2011-01-12 3 views
2

Я теряю свою линию волос над чем-то, что, вероятно, минутное. Если вы сравниваете this website в Chrome/Firefox с IE, вы заметите, что если вы наводите курсор на каждую запись, в Chrome/FF он получит небольшой зеленый фон, тогда как в IE, zilch/nada/zero/zippo ...jQuery Hover и IE

Может ли кто-нибудь в кодировании братства дать некоторые указатели? Правда, JQuery не мой конек, и это код, что питание эффект парения:

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

и 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;} 

Заранее спасибо за то, взглянуть на это :)

+1

Я не вижу каких-либо ошибок, но не могли бы вы вынуть 's console.log' с вашей страницы на всякий случай? – Heikki

+1

Вы, кажется, дважды используете jQuery на своей странице. Может ли это что-то с этим делать? – karim79

+0

@Heikki - Я сделал console.log, и он регистрирует эффекты зависания прекрасно, просто не отображает зеленый фон. Хмм. –

ответ

4

проблема заключается в линии

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

.

У вас есть DIV с идентификатором header и путает IE (который рассматривает переменную как ярлык к элементу.)
Это заставит IE пытаться присвоить что-то ен элемент, который терпит неудачу и останавливает вас сценарий там. (focus класс никогда не будет назначен)

Просто добавьте var в начале (, если вы хотите сделать что-то с ним, или удалить строку полностью, если это пережиток) ..

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

Я пришел к такому же выводу (хотя я не понял, почему добавление 'var' исправил его), за исключением того, что мне также пришлось прокомментировать вызовы' console.log() ', чтобы заставить его работать в IE. – thirtydot

+0

+1 для хорошего объяснения – lnrbob

+0

@thirtydot - вам нужно, чтобы инструменты разработчика работали в IE, чтобы разрешить console.log – lnrbob

5

Я бы предположил, что это связано с тем, что div.availableNowListing не получает никакой высоты, так как вы плаваете элементы внутри div.availableNowListing.

Установить css-свойство overflow: hidden по телефону div.availableNowListing и попробовать его.

..fredrik

+0

Привет, Фредрик, спасибо за кучу ответов - в сочетании с ответом Габи мне удалось исправить дисплей. Это закончилось тем, что это сочетание ошибок CSS/jQuery :) –

+1

+1, потому что он не может принять два ответа ;-) – ifaour

+0

+1, приятное пятнистое fredrik! –