CSS中hover出现不生效的几个原因 ?

在设置CSS的hover时,有时会发现hover不起作用,

总结一下原因:

提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

1.在设置: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>测试</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的效果。

2.当鼠标经过时,让其他元素改变样式:

这时候你会发现,只有后代元素和兄弟元素(紧接在元素后的兄弟元素)才有效果,其他的:hover会失效

还是上个例子

把:

.one :hover {
	background: #da56d0;
}

改为:

.one:hover .two {
	background: #da56d0;
}

发现能达到我们想要的效果

改为:

.two:hover +.three {
		background: #da56d0;
}

也能达到效果(注意把”+”号去掉,就不能达到效果了)

而改为:

.two:hover .four {
		background: #da56d0;
}

3.类名写错了;

4.:hover 被置于 :link 和 :visited 之前了;

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:青梅博客 » CSS中hover出现不生效的几个原因 ?

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活