1

I have three divs, one hidden:

  • Parent
    • Message (hidden)
    • Image

I need to display Message when Image is hovered. That's usually a simple job, but I think the problem arises at the positioning of the divs.

I have an image at the upper right corner, and a text message should appear right next to it (to it's left, actually) when the image is hovered. Parent is a 100% x 32px bar, with position: fixed, so the icon and the message float around the whole page.

I've already tried plenty answers at SO. The only one that worked was using #parent:hover > div, but that makes the message show anytime the cursor hovers Parent, which is bad as Parent is a big invisible bar on the top of the page (should work well with shrinkwrapping, though, but I couldn't do it).

Here is the js fiddle. If you have any alternative approach please tell me.

EDIT: This is a example image of how it should work. It should also float and scroll with the page. example_img

4

1 回答 1

2

Switch the position of elements as mentioned in your style.

This is because you are using Adjascent Sibling selector +. “adjacent” means “immediately following,”

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>

To illustrate this:-

Consider this simple example :- To make the p immediately following the h3 tag appear in gray color. If you put p before h3 it wont work. That is how the Adjacent sibling selector works.

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

 h3 +p {
    color: gray;
}
于 2013-05-10T02:58:27.113 回答