Проблема с наведением курсора на закругленные прямоугольники в IE6

Question

Я делаю это расширенное меню вкладок, но в IE6 изображение ролловера не работает. Есть ли простой способ исправить это?

HTML

<ul class="menu">
<li class="active"><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
</ul>

Пример файла размещен здесь .... Пример HTML

Answer 1

Проблема с этим селектором:

.menu span:hover

К сожалению, хотя IE6 поддерживает селектор :hover, он поддерживает его только для a элементов, поэтому a:hover работает, но span:hover не.

Это одна из многих сломанных и отсутствующих функций в IE6.

Хорошая новость заключается в том, что есть доступный хак, который позволяет IE6 поддерживать :hover для любого элемента.,Он называется Каким бы ни был: hover .

Загрузите файл .htc и добавьте ссылку на него в таблицу стилей, как описано на сайте, и это решит эту конкретную проблему IE6.

Честно говоря, это не единственная вещь в IE6, которая может навредить вам.Моя рекомендация, если это вообще возможно, - отказаться от поддержки IE6.Число людей, использующих IE6, быстро снижается, поэтому оно становится все менее и менее актуальным (в прошлый раз, когда я проверял, оно получало менее 2% доли рынка браузеров, и оно уменьшается на четверть процента или более в месяц - смотритеhttp://gs.statcounter.com/#browser_version-US-monthly-201003-201104). Просто больше не стоит поддерживать.

Но все это говорит о том, что если это единственная проблема, с которой вы столкнулись в IE6, то, очевидно, вы должны использовать что угодно: hover hack -это практически без усилий, и это решит эту проблему, так что оно того стоит.

Answer 2

У вас уже есть несколько решений, но:

Если вы навели указатель мыши на промежуток, он также будет наведен на ссылку, поэтому попробуйте разрешить ссылке обрабатывать промежуток. Это тоже порадует IE6.

a:hover span { }

Answer 3

Я сталкивался с этим раньше, но не могу вспомнить, работает ли он в IE 6.0. Короткий ответ: вам нужно определить остальные связанные псевдоклассы: http://www.w3schools.com/css/sel_hover.asp

Примечание:: hover ДОЛЖЕН идти после: link и: посещения (если они присутствуют) в определении CSS, чтобы быть эффективным!

Попробуйте определить все 4 псевдокласса, даже если они пустые.

a:link    {}
a:visited {}
a:hover   {color:red;}
a:active  {} 

Если ничего не помогает, просто используйте функцию .hover () jQuery: http://api.jquery.com/hover