如何通过hover控制相邻、平级元素的样式
网上有很多资料是关于如何通过 hover 控制子元素的样式。
具体是这样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .inter{display: none;} .app:hover .inter{display: block;} </style> </head> <body> <div class="app"> top <div class="inter">inter</div> </div> </body> </html> 复制代码按正常思路来讲，这是前端最基础的一个功能，相当于京东、淘宝头部导航栏的一个小功能。这功能可以通过js来写，而且更灵活，但本文主要讲css，所以不做延伸。
本文的重点是，如何通过 hover 控制相邻、平级元素的样式。
看这样一段代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style></style> </head> <body> <div class="app"> app </div> <div class="bottom">bottom</div> </body> </html> 复制代码
思考一下，如何通过app类控制bottom类的样式？
我们可以用到相邻兄弟选择器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .bottom { display: none; } .app:hover+.bottom { display: block; } </style> </head> <body> <div class="app"> app </div> <div class="bottom">bottom</div> </body> </html> 复制代码那什么是相邻兄弟选择器？
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
那如果不是相邻元素，而是平级元素，又是否有办法控制其样式呢？
有办法的，可以使用兄弟选择器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .bottom { display: none; } .app:hover~.bottom { display: block; } </style> </head> <body> <div class="app"> app </div> <div class="app_bottom">app_bottom</div> <div class="bottom">bottom</div> </body> </html> 复制代码什么是兄弟选择器？
兄弟选择器:~表示某元素后所有同级的指定元素，强调所有的。
那如果存在多个类名相同的元素，我只想对其中一个元素进行操作是否有方法呢？
这种方法也是有的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .bottom { display: none; } .app:hover~.bottom.show { display: block; } </style> </head> <body> <div class="app"> app </div> <div class="app_bottom">app_bottom</div> <div class="bottom">bottom</div> <div class="bottom show">bottom bottom</div> </body> </html> 复制代码灵活一点，修改兄弟选择器的指向。
作者：子醉
链接：https://juejin.cn/post/7026531087065186341