html - How to display a div while another div is hovered with position: fixed? -
i have 3 divs, 1 hidden:
- parent
- message (hidden)
- image
i need display message when image hovered. that's simple job, think problem arises @ positioning of divs.
i have image @ upper right corner, , text message should appear right next (to it's left, actually) when image hovered. parent 100% x 32px
bar, position: fixed
, icon and message float around whole page.
i've tried plenty answers @ so. 1 worked using #parent:hover > div
, makes message show anytime cursor hovers parent, bad parent big invisible bar on top of page (should work shrinkwrapping, though, couldn't it).
here the js fiddle. if have alternative approach please tell me.
edit: example image of how should work. should float , scroll page.
switch position of elements mentioned in style.
this because using adjascent sibling selector +
. “adjacent” means “immediately following,”
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"> should appear if icon hovered. </div>
to illustrate this:-
consider simple example :- make p
following h3
tag appear in gray color. if put p before h3 wont work. how adjacent sibling selector works.
<h3>hey, h3 element</h3> <p>here's paragraph short</p> h3 +p { color: gray; }
Comments
Post a Comment