纯CSS控制子元素或同级元素的hover效果
作者：microsoftvs 更新时间：2019/10/22 9:36:34 点击数：6306
纯CSS鼠标悬停控制同级元素的hover效果
一般 hover 效果只用在自身元素和控制子元素，那么可以直接用 CSS 控制兄弟元素的 hover 效果吗？
答案是可以的，不过只能控制相邻的元素，具体示例代码如下：
1、如果 #b 元素是 #a 元素的子元素，可以直接通过 #a:hover #b {...} 这种方式来控制。
示例代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS控制同级元素</title>
<style>
div{line-height: 30px}
#a:hover #b{
color: #FF4B4B;
}
</style>
</head>
<body>
<div id='a'>元素a,移动到我可以控制元素b
<div id='b'>元素b</div>
</div>
</body>
</html>查看效果
2、#b 与 #c 是亲兄弟关系，有相同的父节点，且 #b 跟 #c 相邻，可以通过 #b:hover + #c{...} 来控制 #c 的样式。
当鼠标移到 #b 时，#c 的样式就会改变。
示例代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS控制同级元素</title>
<style>
#b:hover + #c{color : red;}
</style>
</head>
<body>
<div id='b'>元素b,移动到我可以控制元素c</div>
<div id='c'>元素c</div>
</div>
</body>
</html>