Псевдокласс: наведение курсора мыши не работает в IE7
-
02-07-2019 - |
Вопрос
У меня есть такой простой код:
<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
больше, чем это работает.Есть какие-нибудь идеи?
Решение
IE7 не позволит вам подать заявку :hover
псевдоклассы для элементов, не являющихся привязками, если вы явно не укажете doctype.Просто добавьте объявление doctype на свою страницу, и оно должно работать идеально.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Подробнее о режиме IE7 / quirks можно найти на это сообщение в блоге.
Другие советы
Я обнаружил, что это решение работало лучше и было немного чище:
<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>
Может быть, это проблема с двойной маржей?Я устроил показ:встроенный блок, когда это произошло для li http://www.positioniseverything.net/explorer/doubled-margin.html