實例示范CSS中偽類選擇器hover的使用方法

來源：懂視網(wǎng) 責編：小采時間：2020-11-02 22:09:23

實例示范CSS中偽類選擇器hover的使用方法

實例示范CSS中偽類選擇器hover的使用方法:在頁面布局時，經(jīng)常會用到CSS中的hover選擇器，它可以設置鼠標經(jīng)過時的特殊樣式，作為一個前端開發(fā)人員，你知道CSS偽類選擇器hover怎么使用嗎？這篇文章就和大家講講CSS中hover的使用方法及實例示范，有一定的參考價值，感興趣的朋友可以看看。偽類選擇器ho

推薦度：

點擊下載本文 文檔為doc格式

導讀實例示范CSS中偽類選擇器hover的使用方法:在頁面布局時，經(jīng)常會用到CSS中的hover選擇器，它可以設置鼠標經(jīng)過時的特殊樣式，作為一個前端開發(fā)人員，你知道CSS偽類選擇器hover怎么使用嗎？這篇文章就和大家講講CSS中hover的使用方法及實例示范，有一定的參考價值，感興趣的朋友可以看看。偽類選擇器ho

在頁面布局時，經(jīng)常會用到CSS中的hover選擇器，它可以設置鼠標經(jīng)過時的特殊樣式，作為一個前端開發(fā)人員，你知道CSS偽類選擇器hover怎么使用嗎？這篇文章就和大家講講CSS中hover的使用方法及實例示范，有一定的參考價值，感興趣的朋友可以看看。

偽類選擇器hover可以在鼠標移到鏈接上時設置一些特殊樣式，比如字體大小,背景顏色，顯示隱藏等等。

注意：偽類選擇器hover 可以作用于所有元素，不僅僅是鏈接。

與hover類似的選擇器還有l(wèi)ink，visited，active。 link 選擇器可以設置未被訪問過的鏈接樣式， visited 選擇器可以設置已被訪問過的鏈接樣式，active選擇器可以設置被激活的鏈接樣式。不清楚的同學可以參考 CSS視頻教程。

用法1：當鼠標經(jīng)過鏈接時改變其自身的樣式（hover后面直接接樣式）

描述：當鼠標經(jīng)過時，a標簽的字體顏色變?yōu)榧t色，字體變大，代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.aa:hover{color: red;font-size: 20px ;}
</style>
</head>
<body>
<a href="#" class="aa">歡迎大家來PHP中文網(wǎng)學習交流</a>
</body>
</html>

第一張圖是原來的效果，第二張圖是鼠標經(jīng)過后實現(xiàn)的效果。

用法2：用偽類選擇器hover控制其子元素的樣式（hover后面加空格再接要改變元素的樣式）

描述：當鼠標經(jīng)過時div時，其子元素的顏色變?yōu)樽仙?，字體變大，出現(xiàn)紅色邊框，代碼如下：

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	.aa{text-decoration: none;color: #000000;}
	.box:hover .aa{color: purple;font-size: 30px ;border: 1px solid red;}
	</style>
	</head>
	<body>
	<div class="box">
	<a href="#" class="aa">望子成龍，望女成鳳</a>
	</div>
	</body>
</html>

效果如下圖所示：

用法3：當鼠標經(jīng)過時控制其兄弟元素的樣式（hover后面加“+”再接要改變元素的樣式）

描述：鼠標經(jīng)過時其兄弟元素的背景顏色變?yōu)辄S色，字體變大，代碼如下：

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	.aa{text-decoration: none;color: #000000;}
	.box1:hover + .box2{font-size: 30px ;background: yellow;}
	</style>
	</head>
	<body>
	<div class="box1">床前明月光</div>
	<div class="box2">疑是地上霜</div>
	</body>
</html>

效果圖：