Псевдокласс: наведение не работает в IE7
У меня такой простой код:
<div class = "div1">
<div class = "div2">Foo</div>
<div class = "div3">
<div class = "div4">
<div class = "div5">
Bar
</div>
</div>
</div>
</div>
и этот CSS:
.div1{
position: relative;
}
.div1 .div3 {
position: absolute;
top: 30px;
left: 0px;
width: 250px;
display: none;
}
.div1:hover .div3 {
display: block;
}
.div2{
width: 200px;
height: 30px;
background: red;
}
.div4 {
background-color: green;
color: #000;
}
.div5 {}
Проблема в следующем: когда я перемещаю курсор с .div2 на .div3 (.div3 должен оставаться видимым, потому что это дочерний элемент .div1), наведение отключается. Тестирую в IE7, в FF работает нормально. Что я делаю не так? Я также понял, что когда я удаляю тег .div5, он работает. Есть идеи?
Ответы 3
Я обнаружил, что это решение работает лучше и немного чище:
<style type = "text/css">
* {
color: #fff;
}
.wrapper {
}
.trigger {
background: #223;
}
.appear {
background: #334;
display: none;
}
.trigger:hover .appear {
display: block;
}
</style>
</head>
<body>
<div class = "wrapper">
<div class = "trigger">
<p>This is the trigger for the hover element.</p>
<div class = "appear">
<p>I'm <strong>alive!</strong></p>
</div>
</div>
</div>
</body>
Это «чище», чем указывать DOCTYPE? Как так?
@mkoistinen Обратите внимание, что это было опубликовано за 14 часов до ответа DOCTYPE, о котором я не знал в то время :)
Ах, моя беда, мне следовало смотреть на даты, чтобы понять правильный контекст.
IE7 не позволит вам применять псевдоклассы :hover к элементам без привязки, если вы явно не укажете тип документа. Просто добавьте на свою страницу объявление doctype, и оно должно работать безупречно.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Больше о режиме IE7 / quirks можно найти на это сообщение в блоге.
Может быть проблема с двойной маржой? Я сделал display: inline-block, когда это произошло для li http://www.positioniseverything.net/explorer/doubled-margin.html
Обратите внимание, что может случиться так, что вам также потребуется добавить .div3: hover {display: block}, иначе, когда вы наведете указатель мыши на дочерний элемент .div3, родительский элемент потеряет свой псевдокласс: hover. Однако это зависит от вашей реализации.