Comment changer le style de survol de la souris sans utiliser CSS-tutoriel CSS-php.cn

Comment changer le style de survol de la souris sans utiliser CSS

php中世界最好的语言

Libérer： 2017-11-29 11:37:01

original

3018 Les gens l'ont consulté

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.

text-decoration:none"

onMouseOver ="this.style.color='#F00';this.style.textDecoration='underline'"

onMouseOut="this.style.color='#00F';this.style.textDecoration=' none'">DIV

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=&#39;#00F&#39;;this.style.textDecoration=&#39;none&#39;"

Copier après la connexion

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>

Copier après la connexion

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=&#39;#F00&#39;;this.style.textDecoration=&#39;underline&#39;"  
onMouseOut="this.style.color=&#39;#00F&#39;;this.style.textDecoration=&#39;none&#39;">DIVCSS5</a>网站！ 
</div> 
 
<div style="color:#00F; font-weight:normal" 
onMouseOver="this.style.color=&#39;#F00&#39;;this.style.fontWeight=&#39;bold&#39;" 
onMouseOut="this.style.color=&#39;#00F&#39;;this.style.fontWeight=&#39;normal&#39;"> 
默认我是蓝色，鼠标悬停时变红色并加粗。 
</div> 
</body> 
</html>

Copier après la connexion

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!