Rumah > Artikel > hujung hadapan web > 实例示范CSS中伪类选择器hover的使用方法

实例示范CSS中伪类选择器hover的使用方法

yuliaasal: 2018-10-23 15:47:215241semak imbas

在页面布局时，经常会用到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>

第一张图是原来的效果，第二张图是鼠标经过后实现的效果。

用法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>

效果如下图所示：

用法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的使用方法，初学者可以自己动手尝试，看看你的代码能不能实现效果，希望这篇文章对你有所帮助！

Atas ialah kandungan terperinci 实例示范CSS中伪类选择器hover的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：盒子的布局位置box-ordinal-group属性详解Artikel seterusnya：如何使用CSS3中属性box-direction控制布局顺序？（代码教程）

Artikel berkaitan

Lihat lagi