css - 悬停 div 时如何影响 UPPER 元素？

Question

我已经完成了 this , this , 和 this但没有给我运气。当下部元素悬停时，我试图更改 div 的颜色，但我做不到。我有这样的 HTML 结构:

  <div class="ms-parent">
      <button type="button" class="ms-choice"></button>
      <div class="ms-drop"></div>
  </div>

到目前为止，这是我尝试过的:

  .ms-parent:hover,
  .ms-choice:hover + .ms-drop,
  .ms-drop:hover,
  .ms-choice:hover,
  .ms-drop:hover ~ .ms-choice{ color:#000000!important; background: #ffffff; }

因此，当 .ms-drop 悬停时，我希望 .ms-choice 更改其样式。我在这里缺少什么？

Answer 1

CSS 中没有 Upper/previous 元素选择器。您可以使用 + 选择下一个直接兄弟元素，也可以使用 ~ 选择所有下一个兄弟元素。

请记下来，我提到了 next，因为现在没有 previous 选择器。希望这将介绍 CSS4。您可以使用 jquery 来实现这一点。否则，如果您想在 CSS 中执行此操作，则需要像下面这样更改 HTML 结构。

 <div class="ms-parent">
  <div class="ms-drop"></div>
  <button type="button" class="ms-choice"></button>      
 </div>

现在您可以像下面这样定位它。

 .ms-drop:hover ~ .ms-choice{ color:#000000!important; background: #ffffff; }   

或者

 .ms-drop:hover + .ms-choice{ color:#000000!important; background: #ffffff; }  

DEMO