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

参考地址:链接

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

 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>

 

IT文库 » css之hover改变子元素和其他元素样式
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址