Search code examples
htmlimagewhitespaceline-breaksrollover

how to avoid line breaks after a hidden image is revealed?

I'm working with a list of links that reveal an image when hovered.
However when the image is revealed and subsequently hidden a line break is left. Is there any way to avoid this?

Here are some images to show the exact problem:

Before: http://i38.photobucket.com/albums/e126/aaron123456/Screenshot2011-11-10at155956.png

After the images are revealed: http://i38.photobucket.com/albums/e126/aaron123456/Screenshot2011-11-10at160023.png

I'm pretty new to coding, any help you can give would be great. thanks!

Solution

  • Try this: http://jsfiddle.net/csPw2/

    html

    <span id="hover_img">Hover!<img src="http://www.google.de/images/srpr/logo3w.png" alt="image" /></span>
<br />
<a href="#">Link1</a><br />
<a href="#">Link1</a><br />
...

    css

    #hover_img img {
    display: none;
}
#hover_img:hover img {
    display: block;
}
#hover_img:hover + br {
    display:none;
}