Question

I’m having some difficulty with this example:

<img src="image1/<?php echo $file; ?>.jpg" style="width:500px" /> 
<p id="caption"><?php echo $caption; ?></p> 

I’m trying to get the caption with CSS when hovering the image.

I tried to use a img{hover;} and p {hover;}.

Is there a way for me to get the caption when hovering the image? The example is in PHP and if it was in CSS or Javascript maybe I could search for it, but so far I can’t find a solution for this.

I appreciate any explanation & examples.

Answer 1

/* by default, hide caption: */
#caption { display: none; } 
/* if caption is next to a hovered img, show: */
img:hover + #caption { display: block; }

jsFiddle Demo

• + is the Adjacent Sibling Selector, supported from IE8.
• :hover pseudoclass is used to style elements the mouse goes over
• Note that if you want to use more than one caption in your document, you should use a class instead of an id. Ids must be unique in the document.

If you need something that works in IE7, consider HTML like this:

<div class="image-with-caption">
    <img src="whatever.png" style="width:200px" /> 
    <p class="caption">caption</p> 
</div>

And the CSS would be:

.caption { display: none; }
.image-with-caption:hover .caption { display: block; }​

​jsFiddle Demo