：hover的使用，即當滑鼠指標移入元素時，所做的樣式設定
範例一
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
width: 300px;
margin-top: 10px;
background: #ff0000;
}
ul li:hover{
background: #000000;
}
</style></head><body>
<ul>
<li></li>
<li></li>
<li></li>
</ul></body></html>
# 以上情況存在於當滑鼠指標移入元素，透過：hover使該元素本身改變新的樣式
#範例二
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
border: 1px solid #ff9f5a;
}
.content{
width: 100px;
height: 100px;
background: #27e7ff;
}
.container:hover .content{
background: #000000;
}
</style></head><body>
<p class="container">
<p class="content"></p>
</p></body></html>以上範例中，當存在父子關係的時候，可以透過父級的：hover使得子級的樣式發生改變，寫法為 .container:hover .content，hover後面有一個空格；但是，子級：hover改變不了父級的樣式
範例三
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
border: 1px solid #ff9f5a;
}
.content{
width: 100px;
height: 100px;
background: #27e7ff;
}
.container:hover +.content{
background: #000000;
}
</style></head><body>
<p class="container"></p>
<p class="content"></p></body></html>以上是CSS中關於hover偽類的使用範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
如何使用HTML，CSS和JavaScript創建動畫倒計時計時器Apr 11, 2025 am 11:29 AM您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然訪問插件，但實際上更多
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌
熱工具
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
