怎樣不使用CSS改變滑鼠懸停樣式-css教學-PHP中文網

首頁

web前端

css教學

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

php中世界最好的语言

Nov 29, 2017 am 11:37 AM

css 懸停

我們知道，在網頁佈局中，有一些特殊情況我們是不能直接使用外部的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=&#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中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7807

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。