html - 在兄弟元素悬停时更改 css

Question

我正在尝试使用 CSS :hover 选择器来更改同级元素上的 CSS。在这种情况下，我试图将其更改为 display: none;

元素是这样设置的。

<div id="test" class="logo">
  <a href="#">
    <img src="http://demandware.edgesuite.net/aagb_prd/on/demandware.static/-/Sites-DK-Library/default/dwa0382f45/selected/UNISEX/SELECTED_FEMME_HOMME_logo.png" style="width: 200px;height:40px;">
  </a>
</div>
<div class="menu__dropdown--femme" style="text-align: right;">
  <a href="" class="menu__dropdown__link--femme">SHOP FEMME</a>
</div>

还有 CSS:

.menu__dropdown--femme:hover #test.logo {
  display: none;
  height: 500px;
}

我在这里做了一个codepen，可以重现这个问题: http://codepen.io/anon/pen/NNRoMr

Answer 1

你的问题不是很清楚，但目前有两种可能!已表示为 Demo1 和 Demo2

/* hover over logo - hides next text */

.demo-1 #test.logo:hover + .menu__dropdown--femme {
  display: none;
  height: 500px;
}
/* hover over next text hides logo */

.demo-2 .menu__dropdown--femme:hover + #test.logo {
  display: none;
  height: 500px;
}
h1 {
  color: red
}

<div class="demo-1">
  <h1>Demo 1</h1>



  <div id="test" class="logo">
    <a href="#">
      <img src="http://demandware.edgesuite.net/aagb_prd/on/demandware.static/-/Sites-DK-Library/default/dwa0382f45/selected/UNISEX/SELECTED_FEMME_HOMME_logo.png" style="width: 200px;height:40px;">
    </a>
  </div>
  <div class="menu__dropdown--femme" style="text-align: right;">
    <a href="" class="menu__dropdown__link--femme">SHOP FEMME</a>
  </div>

</div>


<hr>

<div class="demo-2">
  <h1>Demo 2</h1>
  <div class="menu__dropdown--femme" style="text-align: right;">
    <a href="" class="menu__dropdown__link--femme">SHOP FEMME</a>
  </div>

  <div id="test" class="logo">
    <a href="#">
      <img src="http://demandware.edgesuite.net/aagb_prd/on/demandware.static/-/Sites-DK-Library/default/dwa0382f45/selected/UNISEX/SELECTED_FEMME_HOMME_logo.png" style="width: 200px;height:40px;">
    </a>
  </div>


</div>