如何显示一个div而另一个div悬停在位置：固定？

Question

我有三个div，一个隐藏：

• 父
  • 消息（隐藏）
  • 图像

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

我在右上角有一个图像，当图像悬停时，它旁边会出现一条短信（实际上是它的左边）。 Parent是100% x 32px栏，position: fixed，因此该消息的图标和会在整个页面中浮动。

我已经在SO上尝试了很多答案。唯一有效的方法是使用#parent:hover > div，但这会使消息在任何时候光标悬停 Parent ，这很糟糕，因为 Parent 是一个很大的隐形条页面的顶部（尽管如此，应该适用于收缩包装，但我无法做到）。

以下是the js fiddle.如果您有其他方法，请告诉我。

编辑：这是一个如何运作的示例图片。它还应该随页面浮动和滚动。

Answer 1

按照你的风格改变元素的位置。

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

Demo

CSS

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

#Html Snippet

    <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>

为了说明这一点： -

请考虑以下简单示例： - 使p标记后面的h3显示为灰色。如果你把它放在h3之前就不行了。这就是Adjacent兄弟选择器的工作原理。

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

 h3 +p {
    color: gray;
}