如何使a:hover只在一个DIV中有效

4个DIV，想要4个不同的hover效果。需要怎么做？... 4个DIV，想要4个不同的hover效果。需要怎么做？展开

 我来答

1个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

yinfengnong
推荐于2018-03-12 · TA获得超过5618个赞

知道大有可为答主

回答量：2344

采纳率：89%

帮助的人：2249万

我也去答题访问个人页

关注

展开全部

如下：

#div1 a:hover {
	background:red;
}

#div2 a:hover {
	color:yellowgreen;
}

#div3 a:hover {
	background:red;
	color:white;
}

#div4 a:hover {
	font-weight:bold;
}

具体一点的例子：

<!DOCTYPE html>
<html>
<head>
</head>
	
<style type="text/css">
	#div1 {
		width:200px;
		height:100px;
		border:1px solid pink;
		margin-bottom:10px;
	}
	
	#div2 {
		width:200px;
		height:100px;
		border:1px solid red;
		margin-bottom:10px;
	}
	
	#div3 {
		width:200px;
		height:100px;
		border:1px solid green;
		margin-bottom:10px;
	}
	
	#div4 {
		width:200px;
		height:100px;
		border:1px solid blue;
		margin-bottom:10px;
	}
	
	
	#div1 a:hover {
		background:red;
	}
	
	#div2 a:hover {
		color:yellowgreen;
	}
	
	#div3 a:hover {
		background:red;
		color:white;
	}
	
	#div4 a:hover {
		font-weight:bold;
	}
	
</style>
	
<body>
	
	<div id="div1">
		<a href="">我在div1中,改变背景色</a>
	</div>
	
	<div id="div2">
		<a href="">我在div2中,改变字体颜色</a>
	</div>
	
	<div id="div3">
		<a href="">我在div2中,改变背景色和字体颜色</a>
	</div>
	
	<div id="div4">
		<a href="">我在div3中,加粗字体</a>
	</div>

</body>
</html>