在兄弟元素悬停时更改CSS

Question

I'm trying to use a CSS :hover selector to change CSS on a sibling element. In this case I'm trying to change it to display: none;

The elements are setup like this.

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

And the CSS:

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

I have made a codepen here where the issue can be reproduced: http://codepen.io/anon/pen/NNRoMr

Answer 1

You can style sibling with CSS but only if they are after with the + sign, like this : http://codepen.io/anon/pen/BKLMGK

So in your HTML #test.logo must be after .menu__dropdown

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

Some reading here : https://css-tricks.com/child-and-sibling-selectors/

Answer 2

Your question isn't much clear, but there are two possibilities right now! have stated as Demo1 and 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>