使用 CSS，有没有一种方法可以让我将鼠标悬停在一个组件上时，另一个组件变得可见？

Question

我有一个 <div id="icon"> 标签和一个 <div id="notif"> 标签。当我将鼠标悬停在 <i> 标签上时，我希望 <div id="notif"> 标签的可见性从 hidden 变为 visible。有没有办法使用 CSS :hover?

这是我的 HTML:

<br/>

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

<br/>
<br/>

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

还有我的CSS：

#icon:hover {
  
  
}

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

我不确定要在 #icon:hover 中输入什么！任何帮助都会很棒

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

Answer 1

您可以使用 ~ select 或 select 兄弟元素。

像这样-

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

Answer 2

您可以使用 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>