只使用CSS，在悬停在另一个元素上时显示div

我想显示一个div当有人悬停在<a>元素，但我想这样做在CSS而不是JavaScript。你知道这是怎么实现的吗?

当前回答

如果遵循此方法，即使将鼠标悬停在隐藏元素上，element也会出现。如果您想单击隐藏元素，这将很有用。例如，您可能希望看到一个删除选项，然后单击它。

<style>
#delete_link {
    display: none;
}
    
a:hover + #delete_link {
    display: block;
}

#delete_link:hover{
    display: block;
}

</style>
</head>
<body>


<a>Hover over me!</a>
<div id="delete_link"><a href="#">Element show on hover</a></div>
</body>

2021-08-17 08:28:44

其他回答

对我来说，如果我想与隐藏的div交互，而不看到它消失每次我离开触发元素(在这种情况下)，我必须添加:

div:hover {
    display: block;
}

2013-03-18 15:00:28

我发现使用不透明度更好，它允许你添加css3过渡，使一个漂亮的完成悬停效果。过渡将被旧的IE浏览器丢弃，因此它优雅地降级为。

#{东西透明度:0.0; -webkit-transition:全部500ms ease-in-out; -moz-transition:全部500ms ease-in-out; -ms-transition:全部500ms ease-in-out; -o-transition:全部500ms ease-in-out; 过渡:全部500ms轻松进出; ｝ #{徘徊宽度:80 px; 高度:20 px; 背景颜色:绿色; margin-bottom: 15 px; ｝ #悬停:悬停+ #素材{ 透明度:1.0; ｝ < div id =“悬停”>盘旋< / div > < div id = "东西" > < / div >东西

2014-11-30 00:04:53

HTML

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

code depen:悬停在div上显示另一个div中的文本

2018-03-21 12:15:35

+只允许'选择'第一个未嵌套的元素，>只允许选择嵌套的元素-最好使用~，它允许选择任意元素，即父悬浮元素的子元素。使用不透明度/宽度和过渡，你可以提供平滑的外观

Div{过渡:全部1} .ccc， .ggg{透明度:0;颜色:红} .ccc{高度:0} .aaa:hover ~ .bbb .ccc{透明度:1;高度:34px} .aaa:hover ~ .eee .fff .ggg{透明度:1} <div class="aaa">盘旋我…查看<br><br> </div> < div class = ' bbb > BBBBB < div class =“ccc”> CCCCC < div class = ' ddd ' > DDDDD < / div > < / div > < / div > < div class = ' eee ' > EEEEE < div class =”fff“> FFFFF < div class = ' ggg ' > GGGGG < / div > < div class = '终极战士' > HHHHH < / div > < / div > < / div >

2019-05-22 11:29:06

基于主要答案，这是一个例子，有用的显示信息工具提示时单击?在链接附近:

2018-03-20 14:41:21

只使用CSS，在悬停在另一个元素上时显示div

推荐文章

最新文章

标签