CODEWITHSUNDEEP
htmlcss
Imad
Imad

Reputation: 7490

Hide element on hover of another element

I know it can be done in JavaScript, however I am looking for solution in CSS.

I have three divs.

div#show works fine but #hide doesn't hide when #main is hovered. How can we do it in css?

#show {
  display: none
}
#main:hover + #show {
  display: block
}
#main:hover + #hide {
  display: none
}
<div id="main">
  Hover me
</div>
<div id="show">
  Show me on hover
</div>
<div id="hide">
  Hide me on hover
</div>

Upvotes: 9

Views: 24805

Answers (4)

Mukesh Ram
Mukesh Ram

Reputation: 6328

Try something like this: "#main:hover + #show + #hide"

div#show {
    display:none;
}
#main:hover + #show {
    display:block 
}
#main:hover + #show + #hide {
    display:none
}

It's working for me.

Upvotes: 0

Shuvo Habib
Shuvo Habib

Reputation: 2125

You've to use tilda '~' for this case.

The difference between + and ~ is that ~ matches all following siblings regardless of their proximity from the first element, as long as they both share the same parent.

    #show {display:none}
    #main:hover + #show { display:block }
    #main:hover ~ #hide { display:none }

Upvotes: 0

Humble Potato II
Humble Potato II

Reputation: 159

You just have to replace the + selector with ~ cause the #hide is not placed after #main

So your code is:

#show {display:none}
#main:hover + #show { display:block }
#main:hover ~ #hide { display:none }

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122047

Instead of + you want to use ~ combinator for hide element because + selects only next-sibling

#show {
  display: none
}
#main:hover + #show {
  display: block
}
#main:hover ~ #hide {
  display: none
}
<div id="main">
  Hover me
</div>
<div id="show">
  Show me on hover
</div>
<div id="hide">
  Hide me on hover
</div>

Upvotes: 20

Related Questions