الزائفة الدرجة :مرر الماوس لا يعمل في 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/وضع المراوغات ويمكن الاطلاع على هذا بلوق وظيفة.
نصائح أخرى
لقد وجدت أن هذا الحل يعمل بشكل أفضل قليلا الأنظف:
<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>
يمكن أن يكون ضعف الهامش المشكلة ؟ فعلت العرض:مضمنة كتلة عندما حدث بالنسبة لى http://www.positioniseverything.net/explorer/doubled-margin.html
لا تنتمي إلى StackOverflow