Home >Web Front-end >CSS Tutorial >How to change mouseover style without using CSS

How to change mouseover style without using CSS

php中世界最好的语言Original: 2017-11-29 11:37:013027browse

We know that in web page layout, there are some special cases where we cannot directly use external CSS styles to control DIV styles, such as setting a:hover to A, so how can we change it without applying CSS styles? What about mouseover styles?

You can use onMouseOver (mouse moves over the target) and onMouseOut (after the mouse moves away from the target) to achieve the a tag or other html tagsSet hover style.

You can use it directly on tags, regardless of A tag, SPAN tag, DIV tag, etc.

826bbdb19330e1ca703847f8e794ce8bDIV5db79b134e9f6b82c0b36e0489ee08ed

The above sets the default style for the ahyperlink code, the style after the mouse moves to the target and the mouse moves away from the target. The feature code is relatively long.

Important Note: In order to see the same default style after the mouse is moved away, you usually need to use style directly on the label to set the default CSS style and keep it the same as the onMouseOut setting CSS style. In order to avoid the difference between the initial state object style and the style after the mouse moves away from the object.

The above code:

style="color:#00F; text-decoration:none"  
与
onMouseOut="this.style.color=&#39;#00F&#39;;this.style.textDecoration=&#39;none&#39;"

Set the default font color #00F and not display underlines.

The examples of hover style setting methods through regular hover and without external hover are as follows

Complete regular external CSS case display code:

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

HTML code and browser effect screenshot illustration

DIV CSS default and mouse-over browser test effect screenshots

Default and mouse-over browser test effect screenshots

HTML source code after external CSS style conversion

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

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to change mouseover style without using CSS

Related articles