IE7 Hover auf div verloren gehen, wenn Sie ein untergeordnetes Element dieses div berühren

Question

In Theorie

Ich habe ein div (Container), dass, wenn sie über eines seiner untergeordneten divs schwebte erscheinen (drop-down). Drop-down enthält Links Bilder usw. und wenn ich es verlassen und Behälter dann Drop-down verschwindet.

<div id="container">
  <div>Hover over me to see extra stuff</div>
  <div id="drop-down">
     <div>
       <img />
     </div>
     <div>
       <a />
       <p><span>Info</span><span>More</span></p>
     </div>
     <img />
  </div>
</div> 

Heres die jQuery

$('#container').hover(
  function(){ $(this).find('#drop-down').addClass('hover'); },
  function(){ $(this).find('#drop-down').removeClass('hover'); }
);

Heres die CSS für Hover

#container #drop-down {left: -9999px;}
#container .hover {left: 0;}

In der Praxis

In jedem anderen Browser als IE7 es funktioniert perfekt, aber wenn ich über die Spannweiten Highlight in dem ersten in Dropdown-dann Drop-down verschwindet aus irgendeinem Grunde enthält div, als ob ich Behälter verlassen hatte.

Die Frage

Ich habe meinen Kopf gegen eine Wand wurde Zuschlagen für fast 3 Stunden damit, alle IE7 Fehler finden, ich könnte zu sehen, ob relevant waren, aber leider ohne Erfolg. Ursprünglich dachte ich, könnte es z-index "Thema sein, aber da es tatsächlich über dem unterhalb dieser Anzeige kann nicht der Fall sein (und ich habe es versucht, indem‚position: relative; z-index: 9999;‘ sowohl auf die p und dem Span). Abgesehen davon bin ich völlig ratlos. Ich weiß jedoch, dass die alle Elemente unterhalb diesem div (zum Beispiel des Bild-Tag in dem obigen Beispiel) tun das Problem erstellen, nachdem auf der Polsterung des p um die Spannweiten entlang.

Eine weitere Klarstellung: Ich habe festgestellt, es ist die Elemente der darunterliegenden der Spannweiten zu tun, aber da sie nicht zeigen durch ich keine Ahnung, wie es zu beheben. Auch spielt es keine Rolle, welches Element unterhalb ist nur, wenn es ein div unter das heißt Sie können „Enter“ (das heißt Sie sind nicht schon drin), dann Sie schweben verlieren und Drop-Down verschwindet.

Ich weiß, ich habe nicht die CSS setzen, aber jeder kann denken irgendeinem Grund, warum dies geschehen könnte? Auch ich habe alle CSS arbeiten direkt auf sie deaktiviert und es ist immer noch betroffen, aber dieses Problem.

Answer 1

Wie gesagt in den Kommentaren

Setzen einer Hintergrundfarbe auf der Spannweite wird die Hover-Arbeit machen. Aus irgendeinem Grunde, wenn Sie über einen transparenten Hintergrund in IE schweben, hält es die Maus nicht in dem dom-Objekt (oder in diesem Fall die Spanne) mehr, sondern stattdessen in dem Elemente darunter und ruft die Maus aus Ereignisse.

Microsoft hält dies für einen Fehler und Links zu diesem Blog-Eintrag aus dort Msdn Eintrag

Answer 2

Haben Sie gefunden, welche Elemente in der alten Version von IE verschwinden verursacht. Kopieren fügen Sie diese zu Ihrer CSS

div { display: inline-block; }

div { display: block; }

Diese erklärt den Fehler schön.

Answer 3

div { display: inline-block; }  div { display: block; } 

Das funktionierte für mich ... wow, was für einen Schmerz.