À propos de l'utilisation et du BUG du survol de pseudo-classes dans IE-tutoriel CSS-php.cn

À propos de l'utilisation et du BUG du survol de pseudo-classes dans IE

不言

Libérer： 2018-06-21 17:40:56

original

1751 Les gens l'ont consulté

Cet article présente principalement l'utilisation et les bugs du pseudo-survol dans IE. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Pseudo-survol dans IE. et BUG, les amis dans le besoin peuvent s'y référer.

Règles pour la pseudo-classe :hover :
En CSS1, cette pseudo-classe ne peut être utilisée que pour un objet. Et pour un objet sans attributs href, cette pseudo-classe n'a aucun effet ;
En CSS2, cette pseudo-classe peut être appliquée à n'importe quel objet
Actuellement, IE5.5 et IE6 ne prennent en charge que :hover en CSS1, mais Le nouveau support d'IE7 et Firefox :hover en CSS2.
Utilisez d'abord la méthode d'écriture CSS2 pour l'implémenter :

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

Copier après la connexion

Conseils : Vous pouvez modifier une partie du code avant de l'exécuter

Vous pouvez tester et constatez que dans les navigateurs tels que Firefox qui prennent bien en charge CSS2, l'effet que nous souhaitons obtenir peut être affiché, mais il ne peut pas être obtenu dans IE6.
Changeons notre façon de penser et utilisons la méthode d'écriture de CSS1 pour y jeter un œil :
En CSS1, comme l'utilisation de l'élément li:hover ne peut pas être prise en charge, le texte est inclus dans a et :hover est utilisé pour un . Et placez la partie à afficher et à masquer dans l'élément span ;
En CSS, nous définissons a sur un élément de niveau bloc, et faisons en sorte que la taille et la largeur de a soient identiques à celles de li
et définissons a ; à une position relative, en utilisant a pour simuler li dans l'exemple ci-dessus ;
Utilisez span pour simuler a dans l'exemple ci-dessus, définissez span pour qu'il soit masqué par défaut (display:none;
Quand a est déclenché (); :hover), Ensuite, span est affiché (display:block;);
Cependant, s'il est modifié de la manière ci-dessus, l'effet de l'exemple ne sera toujours pas affiché dans IE6.
La raison est la suivante : le propre problème d'analyse du navigateur IE est un BUG de la pseudo-classe : hover dans IE5.5 et IE6.
Comment résoudre ce problème ?
Ce BUG peut être éliminé en ajoutant des déclarations de propriétés CSS spéciales aux attributs du lien.
li a:hover {}
Nous avons uniquement défini width:100px pour son attribut ; nous avons constaté qu'il n'y avait toujours aucun changement dans IE6. Nous avons essayé de modifier la valeur de width, par exemple en la rendant width :99px, et quelque chose d'étrange s'est produit. Oui, dans IE6, la partie cachée s'affiche lors du déclenchement. Nous avons ensuite défini uniquement la couleur sur l'attribut de li a:hover pour tester (la valeur initiale est #fff), modifié la valeur de couleur et constaté que l'affichage ne pouvait pas être déclenché sous IE6. . .
Enfin, il a été constaté qu'à l'exception de la décoration du texte, de la couleur et du z-index qui ne peuvent pas déclencher l'affichage (il peut y avoir des attributs manquants pour les parties qui ne peuvent pas déclencher l'affichage), d'autres attributs peuvent être utilisés pour éliminer les pseudo-attributs. classes : survolez les propriétés spécifiques au BUG.
Remarque :
1. Il n'est pas recommandé de modifier la valeur d'affichage en tant qu'attribut spécifique pour éliminer ce BUG, et dans certains cas, cet attribut peut ne pas éliminer le BUG.
2. Pour les couleurs de bordure et d'arrière-plan qui sont des attributs spécifiques, nous pouvons également utiliser des lettres complètes et des abréviations pour les modifier. Par exemple, #fff et #ffffff sont résolus en deux valeurs différentes lors de l'élimination des bugs.
L'effet final de l'écriture 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>

Copier après la connexion

Astuce : Vous pouvez modifier une partie du code avant d'exécuter

Version minimale d'implémentation du code (implémentation xugang) :

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

Copier après la connexion

Conseil : vous pouvez modifier une partie du code avant d'exécuter

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun pour en savoir plus. contenu, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Simuler l'effet de box-shadow en CSS3 sous IE

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!