首頁 >web前端 >css教學 >怎樣不使用CSS改變滑鼠懸停樣式

怎樣不使用CSS改變滑鼠懸停樣式

php中世界最好的语言原創: 2017-11-29 11:37:013018瀏覽

我們知道，在網頁佈局中，有一些特殊情況我們是不能直接使用外部的CSS樣式來控制DIV樣式的，例如對A設定a:hover這種，那麼我們要怎麼不適用CSS樣式來改變滑鼠懸停樣式呢？

可以使用onMouseOver（滑鼠移到目標上）和onMouseOut（滑鼠移開目標後）實現對a標籤或其它html標籤設定hover樣式。

直接對標籤使用即可，無論A標籤、SPAN標籤、DIV標籤等皆可。

4cbb029c18800cdb9a5cf76f0a2c2900DIV5db79b134e9f6b82c0b36e0489ee08ed

以上對a超連結程式碼設定預設樣式、滑鼠移到目標上、滑鼠移開目標後樣式。特點代碼比較長。

重要提示說明：為了看到滑鼠移開後與預設樣式相同，通常需要直接對標籤使用style設定預設CSS樣式並且與onMouseOut設定CSS樣式保持相同。以免初始狀態物件樣式與滑鼠移開物件後樣式的不同。

如上程式碼：

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

設定預設字體顏色#00F與不顯示底線。

透過常規hover與不用外部hover實作hover樣式設定方法案例如下

完整常規外部CSS案例展示程式碼：

<!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程式碼與瀏覽器效果截圖說明圖

DIV CSS預設與滑鼠懸停瀏覽器測試效果截圖

預設與滑鼠懸停瀏覽器測試效果截圖

外部CSS樣式轉換後HTML原始碼

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

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！