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

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

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

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

div:hover {
    display: block;
}

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

div {
    display: none;
}

a:hover > div {
    display: block;
} 

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

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

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

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

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

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

不要忘记。如果您试图将鼠标悬停在图像上，则必须将其放置在容器周围。 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>

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

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

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

从我的测试使用这个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，那么它将不起作用。