css小记:hover 鼠标滑过让该元素的子元素或者其他元素改变样式

时间:2022-08-09 01:48:20

<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.hoverfa>a{ text-decoration:none; color:#000;}
.hoverfa:hover{ border-bottom:#6CF 1px solid; }
.hoverfa:hover a{ color:#6CF; text-decoration:none;}
.hoverfa:hover span{ color:#FFF; background:#6CF;} //该元素的子元素

.hoverfa:hover +.hoverfa1{ background:#FC6;}  //其他元素
</style>
</head>

<body>
<div class="hoverfa">
<span>实时动态1</span>
<a href="#" class="admin_icon">实时动态1实时动态1实时动态1实时动态1实时动态1</a>
</div>

<div class="hoverfa1">
<span>实时动态2</span>
<a href="#" class="admin_icon">实时动态2实时动态2实时动态2实时动态2实时动态2</a>
</div>
</body>
</html>