我們知道，在網頁佈局中，有一些特殊情況我們是不能直接使用外部的CSS樣式來控制DIV樣式的，例如對A設定a:hover這種，那麼我們要怎麼不適用CSS樣式來改變滑鼠懸停樣式呢？
可以使用onMouseOver（滑鼠移到目標上）和onMouseOut（滑鼠移開目標後）實現對a標籤或其它html標籤設定hover樣式。
直接對標籤使用即可，無論A標籤、SPAN標籤、DIV標籤等皆可。
text-decoration:none"
onMouseOver ="this.style.color='#F00';this.style.textDecoration='underline'"
onMouseOut="this.style.color='#00F';this.style.textDecoration=' none'">DIV
以上對a超連結程式碼設定預設樣式、滑鼠移到目標上、滑鼠移開目標後樣式。特點代碼比較長。
重要提示說明：為了看到滑鼠移開後與預設樣式相同，通常需要直接對標籤使用style設定預設CSS樣式並且與onMouseOut設定CSS樣式保持相同。以免初始狀態物件樣式與滑鼠移開物件後樣式的不同。
如上程式碼：
style="color:#00F; text-decoration:none" 与 onMouseOut="this.style.color='#00F';this.style.textDecoration='none'"
設定預設字體顏色#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='#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>
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是怎樣不使用CSS改變滑鼠懸停樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
