Question

当我使用 class top_bottom_b1 悬停元素时， class top_bottom_b2 的元素必须隐藏。我需要使用css选择器来实现这一点。我不确定为什么以下代码无效。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

修改

即使和之间存在多个元素（如下所示），也应该使用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

使用adjacent sibling selector +或者如果他们不是导演的兄弟姐妹使用general sibling selectors - ~：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

JS：无法理解悬停css选择器的行为

1 个答案: