html - 如何显示一个 div 而另一个 div 悬停在位置 : fixed?

Question

我有三个 div，一个隐藏:

• 家长
  • 消息(隐藏)
  • 图片

当 Image 悬停时，我需要显示Message。这通常是一项简单的工作，但我认为问题出在 div 的定位上。

我在右上角有一张图片，当鼠标悬停在图片上时，一条文本消息应该会出现在它旁边(实际上是在它的左边)。 parent 是100% x 32px酒吧，与position: fixed ，因此图标和消息会在整个页面上 float 。

我已经在 SO 上尝试了很多答案。唯一有效的方法是使用 #parent:hover > div ，但这会使消息在光标悬停在 Parent 上时显示，这很糟糕，因为 Parent 是页面顶部的一个大的不可见栏(应该与收缩包装一起工作，虽然，但我做不到)。

这里是 the js fiddle.如果您有任何替代方法，请告诉我。

编辑:这是它应该如何工作的示例图像。它还应该随页面 float 和滚动。

Answer 1

根据您的样式切换元素的位置。

这是因为您正在使用 Adjascent Sibling 选择器 +。 “相邻”的意思是“紧随其后”，

Demo

CSS

#img:hover + #msg {
    display: block;
}

#Html 代码段

    <div id="img">
        <a href="some link here">
        <img src="http://j.mp/18xsrJQ"/>
            </a>
    </div>
    <div id="msg">
            This should appear if icon is hovered.
    </div>

为了说明这一点:-

考虑这个简单的例子:- 使紧跟在 h3 标签之后的 p 显示为灰色。如果你把 p 放在 h3 之前，它就不会工作。这就是相邻兄弟选择器的工作方式。

<h3>Hey, an H3 element</h3>
<p>Here's a paragraph which is short</p>

 h3 +p {
    color: gray;
}