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，因为现在没有以前的选择器。希望这将介绍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

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

1 个答案: