實例示範CSS中偽類選擇器hover的使用方法-css教學-PHP中文網

首頁

web前端

css教學

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

yulia

Oct 23, 2018 pm 03:47 PM

csshover

在頁面佈局時，常會用到CSS中的hover選擇器，它可以設定滑鼠經過時的特殊樣式，作為一個前端開發人員，你知道CSS偽類選擇器hover怎麼使用嗎？這篇文章就跟大家講講CSS中hover的使用方法及實例示範，有一定的參考價值，有興趣的朋友可以看看。

偽類選擇器hover可以在滑鼠移到連結上時設定一些特殊樣式，例如字體大小,背景顏色，顯示隱藏等等。

注意：偽類選擇器hover 可以作用於所有元素，而不僅僅是連結。

與hover類似的選擇器還有link，visited，active。 link 選擇器可以設定未被造訪過的連結樣式， visited 選擇器可以設定已被造訪過的連結樣式，active選擇器可以設定已啟動的連結樣式。不清楚的同學可以參考 CSS影片教學。

用法1：當滑鼠經過連結時改變自己的樣式（hover後面直接接樣式）

描述：當滑鼠經過時，a標籤的字體顏色變為紅色，字體變大，程式碼如下：

<!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中文网学习交流</a>
</body>
</html>

第一張圖是原來的效果，第二張圖是滑鼠經過後實現的效果。

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

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

描述：當滑鼠經過時div時，其子元素的顏色變成紫色，字體變大，出現紅色邊框，程式碼如下：

<!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>

效果如下圖所示：

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

用法3：當滑鼠經過時控制其兄弟元素的樣式（hover後面加上「」再接著改變元素的樣式）

描述：滑鼠經過時其兄弟元素的背景顏色變為黃色，字體變大，程式碼如下：

<!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>

效果圖：

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