Rumah > Artikel > hujung hadapan web > 为什么有时候使用css中hover属性会没有反应？（示例）

为什么有时候使用css中hover属性会没有反应？（示例）

藏色散人asal: 2018-08-10 17:24:1010778semak imbas

当我们在使用css中hover时，偶尔会遇到无效的情况，这个真是让人很焦急。那么到底是什么原因导致失效的呢？本篇文章就给大家总结一下css中hover失效的原因。

css中hover的用法具体代码示例如下：

<style type="text/css">
	.one {
		margin: 0 auto;
		width: 400px;
		height: 300px;
		background: #ced05d;
	}
	.two {
		margin: 0 auto;
		width: 100px;
		height: 100px;
		background: #5a5aea;
	}
	.three {
		margin: 0 auto;
		width: 200px;
		height: 100px;
		background: #4b9c49;
	}
	.four {
		margin: 0 auto;
		width: 300px;
		height: 100px;
		background: #7b4141;
	}
	.one :hover {
		background: #da56d0;
	}
</style>
<body>
<h1>css中hover的用法测试</h1>
<div class="one">
	<div class="two">
	</div>
	<div class="three">	
	</div>
	<div class="four">	
	</div>
</div>
</body>

无效原因总结：

一、上述代码测试时发现鼠标经过class为one的时候背景不变，而经过one里面的其他div背景颜色发生变化，说明了:hover前加空格，本身不会有:hover的效果，而后代元素会有:hover的效果。

二、只有后代元素和兄弟元素（紧接在元素后的兄弟元素）才有效果，其他的:hover会失效

三、类名错误；

四、:hover 被置于 :link 和 :visited 之前也是无效的;

注：

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。

提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

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：字体加阴影效果怎么用css属性实现？（代码演示）Artikel seterusnya：CSS中清除浮动的最好用的方法之一的详细介绍（附代码）

Artikel berkaitan

Lihat lagi