CODEWITHSUNDEEP
htmlcss
Mikkel Fennefoss
Mikkel Fennefoss

Reputation: 911

Change css on hover of sibling element

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

Upvotes: 0

Views: 5935

Answers (2)

Deepak Yadav
Deepak Yadav

Reputation: 7109

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>

Upvotes: 1

Mushr00m
Mushr00m

Reputation: 2356

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/

Upvotes: 1

Related Questions