1. 首页
  2. 问题列表
  3. 使用CSS，有没有一种方法，当我悬停在一个组件上时，一个不同的组件变得可见？
提问者：小点点

使用CSS，有没有一种方法，当我悬停在一个组件上时，一个不同的组件变得可见？


我有一个

标记和一个
标记。 当我悬停在标记上时，我希望
标记的可见性从隐藏变为可见。 有没有使用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;
}

我不知道该把什么放入#图标:悬停！ 任何帮助都很好

链接JS fiddle:https://jsfiddle.net/livmarx/l02r4jxt/4/


共2个答案

匿名用户

可以使用~选择器选择同级元素。

像这样-

null

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

匿名用户

您可以使用常规同级组合符

null

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

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS