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

我绝不是一个专家，但我为自己能够解决这个代码的一些问题而感到非常自豪。如果你有:

div {
    display: none;
}

a:hover > div {
    display: block;
}

注意>，一个直接子选择器。

您可以将整个内容包含在一个a标记中，然后，只要您的触发器(可以在它自己的div中，或直接在a标记中，或任何您想要的东西中)物理地接触显示的div，您就可以将鼠标从一个div移动到另一个div。

也许这并不是很有用，但是我必须将我所显示的div设置为overflow: auto，所以有时它有滚动条，当你离开div时就不能使用。

事实上，在最终解决了如何使揭示的div，(虽然它现在是一个孩子的触发器，而不是兄弟姐妹)，坐在后面的触发器，在z-index方面，(从这个页面的一点帮助:如何让一个父元素出现在孩子上面)，你甚至不需要滚动显示的div滚动它，只是停留在触发器和使用你的轮子，或其他。

我所显示的div覆盖了大部分页面，因此这种技术使它更加持久，而不是随着鼠标的每一次移动屏幕从一个状态闪烁到另一个状态。这真的很直观，所以我真的很为自己感到骄傲。

唯一的缺点是你不能把链接放在整个东西里面，但是你可以把整个东西作为一个大链接使用。

2012-08-26 02:00:21

我想提供这个通用模板解决方案，它扩展了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

你可以这样做: div { 显示:没有; ｝ A:hover + div { 显示:块; ｝ <a>盘旋在我上方!< / > <div>悬停显示的东西</div>

这使用相邻的兄弟选择器，并且是suckerfish下拉菜单的基础。

HTML5允许锚元素包装几乎任何东西，所以在这种情况下div元素可以成为锚的子元素。否则，原理是相同的-使用:hover伪类来改变另一个元素的显示属性。

2011-03-06 10:56:21

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

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

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

2015-06-04 23:58:23

不要忘记。如果您试图将鼠标悬停在图像上，则必须将其放置在容器周围。 css:

.brand:hover + .brand-sales {
    display: block;
}

.brand-sales {
    display: none;
}

如果你把鼠标悬停在这个上面:

<span className="brand">
   <img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg" 
     alt"some image class="product-card-place-logo"/>
</span>

这将显示:

<div class="product-card-sales-container brand-sales">
    <div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>

2019-01-05 16:36:11