只使用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

其他回答

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

我想提供这个通用模板解决方案，它扩展了Yi Jiang提供的正确解决方案。

额外的好处包括:

支持将鼠标悬停在任何元素类型或多个元素上; 弹出窗口可以是任何元素类型或元素集，包括对象; 自我记录的代码; 确保弹出框出现在其他元素之上; 如果您正在从数据库生成HTML代码，则可以遵循此基础。

在html中放置以下结构:

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
</div>

在css中放置以下结构:

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

需要注意的几点是:

Because the position of the div.popup is set to fixed (would also work with absolute) the content is not inside the normal flow of the document which allows the visible attribute to work well. z-index is set to ensure that the div.popup appears above the other page elements. The information_popup_container is set to a small size and thus cannot be hovered over. This code only supports hovering over the div.information element. To support hovering over both the div.information and div.popup then see Hover Over The Popup below. It has been tested and works as expected in Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 and Google Chrome 28.0.15.

悬停在弹出窗口上

作为附加信息。当弹出窗口包含你可能想要剪切和粘贴的信息或包含你可能想要与之交互的对象时，首先替换:

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

with

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

其次，调整div.popup的位置，使其与div.information重叠。少量像素足以确保div.popup在将cusor移出div.information时能够接收悬停。

这在Internet Explorer 10.0.9200中无法正常工作，但在Opera 12.16、Firefox 18.0和谷歌Chrome 28.0.15中正常工作。

查看小提琴http://jsfiddle.net/F68Le/一个完整的例子与弹出多层次菜单。

2013-08-11 11:46:57

从我的测试使用这个CSS:

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

这个HTML:

<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>

，结果是它使用第二个扩展，但不使用第一个扩展。因此，如果在悬停目标和隐藏div之间有一个div，那么它将不起作用。

2017-05-26 11:33:25

这个答案不需要你知道什么类型的显示(内联等)隐藏元素应该显示时:

.hover:not(:hover) + .show-on-hover { 显示:没有; ｝ <a class="hoverable">在我上方盘旋!< / > >我是一个块元素 <人力资源/ > <a class="hoverable">也在我上方盘旋!< / > >我是一个内联元素

这使用了相邻的兄弟选择器和not选择器。

2015-06-04 23:58:23

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

2018-03-20 14:41:21

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

推荐文章

最新文章

标签