Maison >interface Web >tutoriel CSS >Comment changer le style de survol de la souris sans utiliser CSS
Comment changer le style de survol de la souris sans utiliser CSS
- php中世界最好的语言original
- 2017-11-29 11:37:013017parcourir
Nous savons que dans la mise en page Web, il existe des cas particuliers où nous ne pouvons pas utiliser directement des styles CSS externes pour contrôler les styles DIV, comme définir a:hover sur A, alors comment pouvons-nous le modifier sans utiliser de styles CSS ? à propos des styles de survol de la souris ?
Vous pouvez utiliser onMouseOver (la souris se déplace sur la cible) et onMouseOut (après que la souris s'éloigne de la cible) pour implémenter une balise ou autre balises htmlDéfinir le style de survol.
Vous pouvez l'utiliser directement sur les balises, quelle que soit la balise A, la balise SPAN, la balise DIV, etc.
826bbdb19330e1ca703847f8e794ce8bDIV5db79b134e9f6b82c0b36e0489ee08ed
Ce qui précède définit le style par défaut pour le code ahyperlien, le style après que la souris se déplace vers la cible et que la souris s'éloigne de la cible. Le code de fonctionnalité est relativement long.
Remarque importante : afin de voir le même style que le style par défaut une fois la souris éloignée, vous devez généralement utiliser le style directement sur l'étiquette pour définir le style CSS par défaut et le conserver identique à celui de onMouseOut. définition du style CSS. Afin d'éviter la différence entre le style de l'objet d'état initial et le style après que la souris s'éloigne de l'objet.
Le code ci-dessus :
style="color:#00F; text-decoration:none" 与 onMouseOut="this.style.color='#00F';this.style.textDecoration='none'"
Définissez la couleur de police par défaut #00F et n'affichez pas les soulignements.
Les exemples de définition des styles de survol par survol régulier et sans survol externe sont les suivants.
Code d'affichage de cas CSS externe régulier complet :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实例</title>
<style>
.abc a{ color:#00F; text-decoration:none}
/* 默认abc盒子里超链接文字字体颜色为蓝色 没有下划线 */
.abc a:hover{ color:#F00; text-decoration:underline}
/* 鼠标悬停abc盒子里超链接文字上后字体颜色为红色 出现下划线 */
.bb{ color:#00F}
.bb:hover{ color:#F00; font-weight:bold}
/* 直接对bb对象盒子设置hover */
</style>
</head>
<body>
<div class="abc">
欢迎访问<a href="http://www.php.cn/">PHP</a>网站！
</div>
<div class="bb">
默认我是蓝色，鼠标悬停时变红色并加粗。
</div>
</body>
</html>Captures d'écran HTML Code et effets du navigateur Diagramme d'explication
Captures d'écran des effets de test du navigateur par défaut et du survol du navigateur DIV CSS
Captures d'écran de l'effet de test du navigateur par défaut et du survol de la souris
Code source HTML après CSS externe conversion de style
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DIVCSS5实例</title> </head> <body> <div class="abc"> 欢迎访问 <a href="http://www.divcss5.com/" style="color:#00F; text-decoration:none" onMouseOver="this.style.color='#F00';this.style.textDecoration='underline'" onMouseOut="this.style.color='#00F';this.style.textDecoration='none'">DIVCSS5</a>网站！ </div> <div style="color:#00F; font-weight:normal" onMouseOver="this.style.color='#F00';this.style.fontWeight='bold'" onMouseOut="this.style.color='#00F';this.style.fontWeight='normal'"> 默认我是蓝色，鼠标悬停时变红色并加粗。 </div> </body> </html>
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Expérience de développement à l'aide de balises h dans des pages Web
Appel de méthodes de fichiers CSS de différentes résolutions
Processus Js d'exploitation des objets DOM
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!