IEにおける疑似クラスホバーとBUGの使用について-CSSチュートリアル-php.cn

IEにおける疑似クラスホバーとBUGの使用について

不言

リリース： 2018-06-21 17:40:56

オリジナル

1750 人が閲覧しました

この記事は主に IE の疑似ホバーの使用方法とバグを紹介します。これは、必要な友達に共有します。必要な友達が参照できます。

擬似クラス:hover のルール:

CSS1 では、この擬似クラスはオブジェクトに対してのみ使用できます。そして、href 属性のないオブジェクトの場合、この疑似クラスは効果がありません。

CSS2 では、この疑似クラスはどのオブジェクトにも適用できます。
現在、IE5.5 と IE6 は CSS1 でのみサポートしていますが、新しい IE7 ではFirefox は CSS2 の :hover をサポートします。
最初に CSS2 記述メソッドを使用して実装します。

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

ログイン後にコピー

ヒント: 実行する前にコードの一部を変更できます

CSS2 を適切にサポートしている Firefox などのブラウザでテストして確認できます。効果を表示できますが、IE6では実現できません。

発想を変えて、CSS1の書き方を使って見てみましょう:

CSS1では、li要素:hoverの使用がサポートされていないため、テキストはaに含まれ、aには:hoverが使用され、それは部分をspan要素に入れます。
CSSでは、aをブロックレベルの要素として設定し、aのサイズと幅をliと同じにします。そして、aを相対位置に設定します。上記の例で li をシミュレートするには a を使用します。
上記の例で a をシミュレートするには、span を使用します (display:none;)。
a がトリガーされると (:hover)、span が表示されます。 (display:block;);
しかし、上記の方法で変更しても、例の効果は依然として IE6 では表示できません。
その理由は、IE ブラウザ自体の解析の問題は、IE5.5 および IE6 の pseudo-class:hover のバグであるためです。
この問題を解決するにはどうすればよいですか?
このバグは、リンク属性に特別な CSS 属性宣言を追加することで解消できます。
li a:hover {}
その属性に width:100px を設定しただけですが、IE6 ではまだ変更がないことがわかり、width:99px にするなど、width の値を変更しようとしましたが、何か奇妙なことが起こりました。 IE6 では、トリガーされると隠れた部分が表示されます。次に、li a:hover の属性に color のみを設定してテストし (初期値は #fff)、color 値を変更したところ、IE6 では表示がトリガーされないことがわかりました。。。
最後に、表示をトリガーできない text-decoration、color、z-index (表示をトリガーできない部分に欠落している属性がある可能性があります) を除いて、他の属性を使用して疑似クラスを排除できることがわかりました。ホバー特定の属性。
注:
1. このバグを解消するために特定の属性として表示値を変更することはお勧めできません。場合によっては、この属性ではバグを解消できない場合があります。
2. 特定の属性である境界線と背景の色については、バグを排除するために、完全な文字と省略形を使用して変更することもできます。
CSS1 記述法の最終的な効果:

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

ログイン後にコピー

ヒント: 実行前にコードの一部を変更できます

最小コード実装バージョン (xugag 実装):

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

ログイン後にコピー

ヒント: 実行前にコードの一部を変更できます

以上です。この記事の内容全体が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。