css样式中的Hove的几种选择方式

最新推荐文章于 2024-04-19 15:57:51 发布

Lin_AiNi

最新推荐文章于 2024-04-19 15:57:51 发布

阅读量712

点赞数

分类专栏： css 文章标签： hover选择方式

本文链接：https://blog.csdn.net/Lin_AiNi/article/details/79065624

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css样式中的Hove的使用</title>
</head>
<style>
div {width: 100px; height: 40px; margin-bottom: 10px; }
#b,#g { width: 200px; height: 100px; }
#c,#h { margin: auto; }
#a, #b, #d, #f{cursor:pointer;}
#a {background-color:#FFFF00;}
#b {background-color:rgb(209, 165, 84);}
#c,#f {background-color:rgb(236, 203, 141);}
#d,#g {background-color:rgb(54, 142, 184);}
#e,#h {background-color:rgb(105, 79, 218);}
/* 自己#a:hover */
#a:hover {background-color:rgb(76, 165, 206);}
/* 子级#b:hover #c */
#b:hover #c {background-color:#00FF00;}
/* 同级#d:hover + #e */
#d:hover+#e {background-color:rgb(236, 203, 141);}
/* 同级--下面的子元素--#d:hover + #e */
#f:hover + #g #h{background-color:rgb(236, 203, 141);}
</style>
<body>
<h2>当只需要显示Hove元素a时(自己#a:hover)</h2>
<div id='a'>元素a</div>

<h2>当移动到元素b---修改元素c时（子级#b:hover #c）</h2>
<div id='b'>元素b
<div id='c'>元素c</div>
</div>

<h2>当移动到元素d----显示元素e时（同级--d紧接着e--#d:hover + #e）</h2>
<div id='d'>元素d</div>
<div id='e'>元素e</div>

<h2>移动到元素f---显示元素g下面的子元素h</h2>
<div id='f'>元素f</div>
<div id='g'>元素g
<div id="h">元素h</div>
</div>
<h3>其余参考css选择器表</h3>
</body>
</html>