الزائفة الدرجة :مرر الماوس لا يعمل في IE7

StackOverflow https://stackoverflow.com/questions/143296

  •  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>

pastebin.

يمكن أن يكون ضعف الهامش المشكلة ؟ فعلت العرض:مضمنة كتلة عندما حدث بالنسبة لى http://www.positioniseverything.net/explorer/doubled-margin.html

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top