JS：无法了解悬浮css选择器的行为

Question

When I hover the element with class top_bottom_b1 , the element with class top_bottom_b2 have to hide. 当我将鼠标悬停在top_bottom_b1类的元素上时，必须隐藏top_bottom_b2 类的元素。 I need to achieve this using css selector. 我需要使用CSS选择器来实现。 I'm not sure why below code doesn't work. 我不确定为什么下面的代码不起作用。

 .top_bottom_b1{ display: block; width:50px; height:50px; background-color:red; } .top_bottom_b2{ display: block; width:50px; height:50px; background-color:yellow; top: 8px; } .top_bottom_b1:hover .top_bottom_b2{ display: none; }

 <body> <div class="top_bottom_b1"></div> <div class="top_bottom_b2"></div> </body>

EDIT: 编辑：

Even if there are multiple elements(as shown below) between and , the css selector (hover) should work. 即使有之间和多个元件（如下所示），则CSS选择（悬停）应该工作。

<div class="top_bottom_b1"></div>
  <div></div>
  <div></div>
  <div></div>
  ... <!-- N number of divs -->
<div class="top_bottom_b2"></div>

Answer 1

Use the adjacent sibling selector + or if their not director siblings use the general sibling selectors - ~ : 使用相邻的兄弟选择器 +或者如果不是他们的director兄弟，则使用常规的兄弟选择器 ~ ：

 .top_bottom_b1 { display: block; width: 50px; height: 50px; background-color: red; } .top_bottom_b2 { display: block; width: 50px; height: 50px; background-color: yellow; top: 8px; } div > .top_bottom_b2 { background: blue; } .top_bottom_b1:hover ~ .top_bottom_b2 { display: none; } .top_bottom_b1:hover ~ div > .top_bottom_b2 { display: none; }

 <div class="top_bottom_b1"></div> <div>I'm in the middle</div> <div class="top_bottom_b2"></div> <div> <div class="top_bottom_b2"></div> </div>

JS：无法了解悬浮css选择器的行为

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-12-11 12:39:12

JS：无法了解悬浮css选择器的行为

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-12-11 12:39:12

解决方案1
3 已采纳 2016-12-11 12:39:12