@N0rd
Frontend developer

Как осуществить воздействие на дочерние элементы через :hover родительского?

Есть некий блок (класс image в примере), при наведении на него требуется выводить затемнение (overlay) и текст (text). Сделал их в виде отдельных дочерних дивок, которым по умолчанию задан display: none
В стилях для ховера родительского элемента прописал следующее
.image:hover .overlay{
display: block;
}
.image:hover .text{
display: block;
}
Т.е. при наведении на родительский элемент, отображаются дочерние. В фф и вебкит браузерах работает как надо, в ие9 никакой реакции при наведении.
Почему данный пример не работает в ие? Как реализовать такую задачку кроссбраузерно?

jsfiddle.net/vD6Nf
  • Вопрос задан
  • 3408 просмотров
Решения вопроса 1
В IE псевдокласс :hover имеет проблемы с работой для нессылочных элементов.

Если не ошибаюсь, использование DOCTYPE может решить эту проблему. Только не подскажу, какой именно нужен. В любом случае, есть разные варианты багфикса, гугл вам в помощь.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы