0

I have an <div id="icon"> tag and a <div id="notif"> tag. When I hover over the <i> tag, I want the <div id="notif"> tag's visibility to go from hidden to visible. Is there a way to do this using CSS :hover?

here is my HTML:

<br/>

<div id="icon">
    Hover over me!
</div>

<br/>
<br/>

<div id="notif">
    And you can see me!
</div>

And my CSS:

#icon:hover {
  
  
}

#notif{
  color: red;
  visibility: hidden;
}

I'm not sure what to put into the #icon:hover! Any help would be great

Link JS Fiddle: https://jsfiddle.net/livmarx/L02r4jxt/4/

Liv Marx
  • 305
  • 1
  • 6
  • 12

2 Answers2

1

You can use ~ selector to select sibling element.

Like so -

#icon:hover ~ #notif {
  visibility: visible;
}

#notif{
  color: red;
  visibility: hidden;
}
<div id="icon">
    Hover over me!
</div>

<br/>
<br/>

<div id="notif">
    And you can see me!
</div>
Debsmita Paul
  • 1,442
  • 9
  • 22
0

You can use the General sibling combinator

#notif {
  color: red;
  visibility: hidden;
}

#icon:hover ~ #notif {
  visibility: visible;
}
<br/>
<div id="icon">
  Hover over me!
</div>
<br/>
<br/>
<div id="notif">
  And you can see me!
</div>
Gerard
  • 15,418
  • 5
  • 30
  • 52