: hover псевдокласс CSS не работает в IE7

Question

У меня проблема с псевдоклассом :hover.

Я использую его как

tr.lightRow:hover { 
    color:red 
} 

Он работает в Safari и Firefox, но он не работает в IE7. Пожалуйста, помогите мне.

Answer 1

IE7 поддерживает: зависает, по крайней мере, в стандартном режиме. Это может не быть в режиме quirks.

Answer 2

: наведение не поддерживается каждым элементом, например. он работает на <a> но не работает <div> afaik

Answer 3

У IE есть история плохой поддержки CSS. Первоначально только a поддерживаемые теги :hover. А также вы не могли бы иметь что-то вроде a:hover span, чтобы указать, что при падении родителядолжен меняться только тег span.

Если вы хотите, чтобы правильная функция :hover во всех версиях IE, вам необходимо использовать javascript и onmouseover/onmouseout.

Это также помогает, если вы используете метод xhtml doctype, чтобы включить режим стандартов.

Answer 4

Я бежал в это несколько раз - посмотреть на следующей ссылке ..

http://www.bernzilla.com/item.php?id=762

«, если вам нужна поддержка: парить на всех элементах, а не только < > , убедитесь, что вы используете строгий DOCTYPE, поэтому IE7 не вступает в режим причуд. "

Answer 5

IE 6 поддерживает только псевдокласс класса :hover, но IE 7 поддерживает его на большинстве элементов.

Как упоминал Дэвид, он может не работать в режиме quirks. Причина в том, что IE в основном возвращается к чему-то более близкому к IE 4 в режиме quirks, позволяя использовать множество специфических особенностей IE и удаляя несколько стандартных функций.

Если вы хотите функциональность :hover на элемент блока и поддерживать его обратно в IE 6, вы можете использовать элемент ссылки и сделать его блочным элементом с помощью CSS. Обратите внимание, что ссылка только может содержать встроенные элементы (например, не div с), так что если вы хотите заблокировать элементы внутри линии вы должны установить, что с помощью CSS также:

CSS:

.hoverlink { display: block; } 
.hoverlink:hover { background: #eee; } 
.hoverlink .item { display: block; } 

HTML:

<a href="..." class="hoverlink"> 
    <span class="item">Line 1</span> 
    <span class="item">Line 2</span> 
    <span class="item">Line 3</span> 
</a> 

(Вы могли бы хотеть рассмотреть влияние на поисковые системы, используя технику также. ссылка имеет лучшее воздействие, если она содержит только текст, описывающий то, что она связывает с.)