Блог

Главная - Вопросы по программированию - Эффект наведения курсора мыши не работает в IE

Эффект наведения курсора мыши не работает в IE

#internet-explorer #internet-explorer-8 #cross-browser

#internet-explorer #internet-explorer-8 #кроссбраузерный

Вопрос:

Мой код:

 <td width="70" height="60">
    <a href="images/Gallery1/6.jpg" rel="lightbox" title="my title" >
        <img src="images/Gallery1/thumbs/6.jpg"  width="65" height="40" border="0" class="gallery-img">
    </a>
</td>

И CSS:

 .gallery-img{
    border:4px solid #FFFFFF;
}
.gallery-img:hover{
    border:4px solid #D4D5D8;
}

Приведенный выше код отлично работает в Firefox, но не при использовании IE 8. Как я могу это исправить?

Ответ №1:

Это будет работать в IE8, если вы находитесь в стандартном режиме.

Это не сработает, если вы находитесь в режиме причуд:

  • :hover не работает для не- a элементов в IE6 и IE7 / 8 в режиме Quirks.

Тот факт, что вы используете таблицы для компоновки, наводит меня на мысль, что из всех возможных причин здесь ответом является нахождение в режиме Quirks.

Прочитайте эту длинную и подробную статью:

http://hsivonen.iki.fi/doctype/

Короче говоря, вам нужно убедиться, что у вас есть правильный doctype в качестве самой первой строки в вашем HTML, например:

 <!DOCTYPE html>

Вы можете убедиться в том, что я говорю, открыв соответствующую страницу в IE и нажав F12, чтобы открыть Инструменты разработчика. Если для «Режима документа» указано режим Quirks, ваш фрагмент CSS никогда не будет работать. После добавления doctype в нем должно быть написано «Стандарты IE8», и все это должно сработать.

Если он по-прежнему не работает, значит, у вас какая-то другая проблема, не позволяющая IE использовать стандартный режим.

Ответ №2:

Попробуйте удалить border="0" из вашего HTML-тега img.

Ответ №3:

На какой версии IE вы это тестируете?

Ранние версии (версия 6) IE поддерживали ТОЛЬКО указатель наведения курсора на a (link) элементы и ничего больше. Более новые версии должны поддерживать это, но у меня нет личного опыта, чтобы доказать это.

О IE6 было написано следующее: http://www.howtocreate.co.uk/wrongWithIE/?chapter=:hover

Ответ №4:

у меня работает. Я пробовал это в Chrome, IE 8 и 9:

http://jsfiddle.net/EmmrW/1/

даже с вашим обновленным кодом он все еще работает:

http://jsfiddle.net/EmmrW/2/

но это правда — попробуйте переместить все атрибуты width и height, border в CSS — там им самое место.

Кроме того, у вас могут быть другие определения, какой-либо специфичный для IE CSS-файл или правила? Проверьте их также.

Ответ №5:

Проверьте это:

 a .gallery-img{
    border:4px solid #FFFFFF;
}
a:hover .gallery-img{
    border:4px solid #D4D5D8;
}

Я думаю, что это сработает. Спасибо