为什么有时候使用css中hover属性会没有反应？（示例）-css教程-PHP中文网

首页

web前端

css教程

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

藏色散人

Aug 10, 2018 pm 05:24 PM

当我们在使用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 之后（如果存在的话），这样样式才能生效。

以上是为什么有时候使用css中hover属性会没有反应？（示例）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Flexbox vs Grid：我应该学习两者吗？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

轨道力学（或我如何优化CSS KeyFrames动画）May 09, 2025 am 09:57 AM

重构自己的代码看起来是什么样的？约翰·瑞亚（John Rhea）挑选了他写的一个旧的CSS动画，并介绍了优化它的思维过程。

CSS动画：很难创建它们吗？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@KeyFrames CSS：最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcssanimations.keytricksinclude：1）definingsmoothtransitionsbetnestates，2）使用AnimatingmatematingmultationmatingMultationPropertiessimultane，3）使用使用4）使用BombingeNtibalibility，4）使用BombingingWithjavofofofofofoffo

CSS计数器：自动编号的综合指南May 07, 2025 pm 03:45 PM

CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1）他们可以使用forterablesofcontents，ListItems，and customnumbering.2）AdvancedsincludenestednumberingSystems.3）挑战挑战InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4）创造性