css之hover改变子元素和其他元素样式

2018-06-24 01:00:54来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

参考地址:链接

+表示下一级元素,>表示子元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 
 8 <style>
 9     #a {color : #FFFF00;}
10 
11     #a:hover + #c{color : #00FF00;}
12     #a:hover + #c > #b{color : #0000FF;}
13 </style>
14 <div id='a'>元素1
15 
16 </div>
17 <div id='c'>元素3
18     <div id='b'>元素2</div>
19 </div>
20 
21 
22 </html>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切

下一篇:你必须要知道的几个CSS技巧