不能使用外部CSS樣式實作hover滑鼠懸停改變樣式
在DIV+CSS網頁布局中，有時我們不能直接使用外部CSS樣式控制DIV樣式，比如對a設定a:hover樣式。
可以使用onMouseOver（滑鼠移到目标上）和onMouseOut（滑鼠移開目标後）實作對a标簽或其它html标簽設定hover樣式。
直接對标簽使用即可，無論A标簽、SPAN标簽、DIV标簽等均可。
<a href="http://www.jb51.net/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" style="color:#00F; text-decoration:none" onMouseOver="this.style.color='#F00';this.style.textDecoration='underline'" onMouseOut="this.style.color='#00F';this.style.textDecoration='none'">jb51</a> 以上對a超連結代碼設定預設樣式、滑鼠移到目标上、滑鼠移開目标後樣式。特點代碼比較長。
jb51.net重要提示說明：為了看到滑鼠移開後與預設樣式相同，通常需要直接對标簽使用style設定預設CSS樣式并且與onMouseOut設定CSS樣式保持相同。以免初始狀态對象樣式與滑鼠移開對象後樣式的不同。
如上代碼：
style="color:#00F; text-decoration:none" 與
onMouseOut="this.style.color='#00F';this.style.textDecoration='none'" 設定預設字型顔色#00F與不顯示下劃線。
通過正常hover與不用外部hover實作hover樣式設定方法案例如下
1、完整正常外部CSS案例展示代碼：
XML/HTML Code複制内容到剪貼闆
1.<!DOCTYPE html>
2.<html>
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.<title>jb51.net執行個體</title>
6.<style>
7..abc a{ color:#00F; text-decoration:none}
8.
9.
10..abc a:hover{ color:#F00; text-decoration:underline}
11.
12.
13..bb{ color:#00F}
14..bb:hover{ color:#F00; font-weight:bold}
15.
16.</style>
17.</head>
18.<body>
19.<div class="abc">
20.歡迎通路<a href="http://www.jb51.net/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >jb51.net</a>網站！
21.</div>
22.
23.<div class="bb">
24.預設我是藍色，滑鼠懸停時變紅色并加粗。
25.</div>
26.</body>
27.</html> 2、HTML代碼與浏覽器效果截圖說明圖
預設與滑鼠懸停浏覽器測試效果截圖
3、外部CSS樣式轉換後HTML源代碼
XML/HTML Code複制内容到剪貼闆
1.<!DOCTYPE html>
2.<html>
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.<title>jb51.net執行個體</title>
6.</head>
7.<body>
8.<div class="abc">
9.歡迎通路
10.<a href="http://www.jb.com/" target="_blank" rel="external nofollow"
11.style="color:#00F; text-decoration:none"
12.onMouseOver="this.style.color='#F00';this.style.textDecoration='underline'"
13.onMouseOut="this.style.color='#00F';this.style.textDecoration='none'">jb51.net</a>網站！
14.</div>
15.
16.<div style="color:#00F; font-weight:normal"
17.onMouseOver="this.style.color='#F00';this.style.fontWeight='bold'"
18.onMouseOut="this.style.color='#00F';this.style.fontWeight='normal'">
19.預設我是藍色，滑鼠懸停時變紅色并加粗。
20.</div>
21.</body>
22.</html>
4、使用onMouseOver和onMouseOut實作外部CSS hover樣式截圖
使用onMouseOver和onMouseOut實作外部CSS hover樣式浏覽器測試效果與說明截圖
5、特别說明：無論是a标簽還是div标簽、span标簽、h1标簽、p标簽等都可以直接在标簽内使用onMouseOver和onMouseOut實作滑鼠懸停移到對象上與移開後樣式變化。需要注意是，一般為了初始預設狀态與滑鼠移開後樣式儲存一緻，需要對标簽内加style屬性設定CSS與onMouseOut（滑鼠移開）設定樣式CSS儲存一緻
LESS 将 CSS 賦予了動态語言的特性，如 變量， 繼承， 運算， 函數. LESS 既可以在 用戶端 上運作 (支援IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服務端運作。