Heim > Artikel > Web-Frontend > Über die Verwendung von Pseudoklassen-Hover und BUG im IE
Über die Verwendung von Pseudoklassen-Hover und BUG im IE
- 不言Original
- 2018-06-21 17:40:561739Durchsuche
Dieser Artikel stellt hauptsächlich die Verwendung und Fehler von Pseudo-Hover im IE vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen.
Pseudo-Hover im IE und BUG, Freunde in Not können sich darauf beziehen.
Regeln für Pseudoklasse:hover:
In CSS1 kann diese Pseudoklasse nur für Objekte verwendet werden. Und für Objekte ohne href-Attribute hat diese Pseudoklasse keine Auswirkung.
In CSS2 kann diese Pseudoklasse auf jedes Objekt angewendet werden.
Derzeit unterstützen IE5.5 und IE6 nur :hover in CSS1 Der neue IE7 und Firefox unterstützen :hover in CSS2.
Verwenden Sie zunächst die CSS2-Schreibmethode, um Folgendes zu implementieren:
<html>
<head>
<style>
* {margin:0; padding:0;}
ul {list-style:none;margin:100px;}
li {height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;}
li a {display:none;}
li:hover a{display:block; text-decoration:none;width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff;}
</style>
</head>
<body>
<ul>
<li>鼠标移过来触发我吧！<a href="#" title="">哈哈，终于被你发现了！</a></li>
</ul>
</body>
</html>Tipps: Sie können einen Teil des Codes ändern, bevor Sie ihn ausführen.
Sie können ihn testen und finden dass es in Firefox usw. funktioniert. Browser mit guter CSS2-Unterstützung können den von uns gewünschten Effekt anzeigen, in IE6 ist dies jedoch nicht möglich.
Lassen Sie uns unsere Denkweise ändern und die Schreibmethode von CSS1 verwenden, um einen Blick darauf zu werfen:
Da in CSS1 die Verwendung von li element:hover nicht unterstützt werden kann, ist der Text in a enthalten und :hover wird für a verwendet . Und fügen Sie den anzuzeigenden und auszublendenden Teil in das Span-Element ein; zu einer relativen Position, verwenden Sie a, um im obigen Beispiel li zu simulieren; :hover), Dann wird span angezeigt (display:block;);
Bei einer Änderung auf die oben beschriebene Weise wird der Effekt des Beispiels jedoch immer noch nicht in IE6 angezeigt.
Der Grund ist: Das eigene Parsing-Problem des IE-Browsers ist ein Fehler in der Pseudoklasse:hover in IE5.5 und IE6.
Wie kann dieses Problem gelöst werden?
Dieser FEHLER kann durch das Hinzufügen einiger spezieller CSS-Attributdeklarationen zu den Linkattributen behoben werden.
li a:hover {}
Wir haben nur width:100px für sein Attribut festgelegt. Wir haben festgestellt, dass es in IE6 immer noch keine Änderung gab, z. B. auf width:99px. und etwas Seltsames ist passiert. Ja, im IE6 wird der ausgeblendete Teil angezeigt, wenn er ausgelöst wird. Wir haben dann nur Farbe auf das Attribut von li a:hover zum Testen gesetzt (der Anfangswert ist #fff), den Farbwert geändert und festgestellt, dass die Anzeige unter IE6 nicht ausgelöst werden kann. . .
Schließlich wurde festgestellt, dass außer Textdekoration, Farbe und Z-Index, die keine Anzeige auslösen können (möglicherweise fehlen einige Attribute für die Teile, die keine Anzeige auslösen können), andere Attribute verwendet werden können, um Pseudo- zu beseitigen. Klassen: Hover-BUG-spezifische Eigenschaften.
Hinweis:
1. Es wird nicht empfohlen, den Anzeigewert als spezifisches Attribut zu ändern, um diesen Fehler zu beseitigen. In einigen Fällen kann es sein, dass dieses Attribut den Fehler nicht beseitigt.
2. Für die Farben im Rahmen und im Hintergrund, bei denen es sich um bestimmte Attribute handelt, können wir sie auch durch vollständige Buchstaben und Abkürzungen ändern. Beispielsweise werden #fff und #ffffff beim Beseitigen von Fehlern in zwei verschiedene Werte geparst.
Der endgültige Effekt des CSS1-Schreibens:
<html>
<head>
<style>
* {margin:0; padding:0;}
ul {list-style:none;margin:100px;}
li {height:100px; width:100px; background:#000; font-size:12px; }
li a {display:block; height:100px; width:100px; position:relative; color:#fff; text-decoration:none;}
li a:hover {background:#ccc;}
li span {display:none; }
li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; }
</style>
</head>
<body>
<ul>
<li><a href="#" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li>
</ul>
</body>
</html>Tipps: Sie können einen Teil des Codes ändern, bevor Sie
Minimale Code-Implementierungsversion (Xugang-Implementierung) ausführen:
<html>
<head>
<style>
li {height:10px; width:120px; background:#000;}
li a{height:10px; width:120px; display:block;}
li a:hover {background:#ccc;}
li span {display:none;}
li a:hover span {display:block; width:100px; height:40px; background:#c00; position:absolute; top:15px; left:180px;}
</style>
</head>
<body>
<ul>
<li>
<a href="#" title="">鼠标移过来触发
<span>
<ul>
<li>aaa</li>
<li>aaa</li>
</ul>
</span>
</a>
</li>
</ul>
</body>
</html>Sie können zuerst einen Teil des Codes ändern und ihn dann ausführen.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle zum Lernen hilfreich ist Bitte achten Sie auf die chinesische PHP-Website!
Verwandte Empfehlungen:
Simulation des Box-Shadow-Effekts in CSS3 unter IEDas obige ist der detaillierte Inhalt vonÜber die Verwendung von Pseudoklassen-Hover und BUG im IE. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!