首頁 > 開發者 > CSS

怎樣不使用CSS改變滑鼠移至上方樣式

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
我們知道 ，在網頁布局中，有一些特殊情況我們是不能直接使用外部的CSS樣式來控制DIV樣式的，比如對A設定a:hover這種，那麼我們要怎麼不適用CSS樣式來改變滑鼠移至上方樣式呢？

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

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

<a href="http://www.php.cn/" style="color:#00F; text-decoration:none"

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

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

以上對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中文網其它相關文章！


相關閱讀：

網頁中使用h標籤的開發經驗

調用不同解析度的css檔案方法

Js操作DOM對象的流程

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More