Don't understand how to show the caption when hovering image - html

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

Answer 2

To affect the style of the p while hovering over the img:
img:hover + #caption {
display: block; /* or whatever...*/
}
Or:
img:hover ~ #caption {
display: block; /* or whatever... */
}
It's worth noting that these examples assume that you have only one p element with an id of 'caption,' if you have multiple p elements with that id, then you need to use a class instead, as an id must be unique within the document.
The + is the CSS adjacent-sibling combinator, and selects the #caption that immediately follows the img over which the user is hovering.
The ~ is the CSS general-sibling combinator, and selects any sibling #caption element that is a later-sibling of the img which is hovered; regardless of any elements that might appear in between (though they do have to be siblings within the same parent element).
Reference:
CSS selectors, at the W3.org.

Answer 3

You want img:hover {/* css */}
Actually, you probably want to do something like this:
<div class="hoverme">
<img src="image1/<?php echo $file; ?>.jpg" style="width:500px" />
<span><?php echo $caption; ?></span>
</div>
and then in your CSS:
div.hoverme span{
display: none;
}
div.hoverme:hover span{
display: block;
}

Answer 4

Try using JavaScript events onMouseOver and onMouseOut to show/hide the caption, something like this:
<img src="image.jpg" style="width:500px"
onMouseOver="document.getElementById('caption').style.display='block'"
onMouseOut="document.getElementById('caption').style.display='none'" />
<p id="caption" style="display:none">Caption here</p>