Pseudoklasse: hover funktioniert nicht in IE7

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

  •  02-07-2019
  •  | 
  •  

Frage

Ich habe einen solchen einfachen Code: 

<div class="div1">
  <div class="div2">Foo</div>
  <div class="div3">
    <div class="div4">
      <div class="div5">
        Bar
      </div>        
    </div>
  </div>
</div>

und das 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 {}

Das Problem ist: Wenn ich die Cursor von .div2 bewegen .div3 (.div3 sichtbar bleiben soll, weil es das Kind von .div1 ist), dann der Hover deaktiviert ist. Ich teste es in IE7, in FF es funktioniert gut. Was mache ich falsch? Ich habe auch erkannt, dass, wenn ich .div5 Tag entfernen, als es funktioniert. Irgendwelche Ideen?

War es hilfreich?

Lösung

IE7 wird nicht zulassen, dass Sie :hover pseudo-Klassen nicht-Ankerelemente anwenden, wenn Sie explizit eine Doctype angeben. Fügen Sie einfach eine Doctype Deklaration zu Ihrer Seite und es sollte perfekt funktionieren. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

Mehr zu IE7 / Quirks-Modus kann auf diesem Blog-Eintrag .

Andere Tipps

Ich fand, dass diese Lösung besser gearbeitet und war etwas sauberer: 

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

Könnte es die doppelte Marge Problem sein? Ich habe einen display: inline-block, wenn es für eine li passierte http://www.positioniseverything.net/explorer/doubled-margin.html

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top