.jpg" sty...">
Geek Answers Handbook

I don’t understand how to show the title on hover

I am having some difficulties with this example:

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

I am trying to get a header with CSS when hovering an image.

I tried using a img{hover;} and p {hover;} .

Is there a way to get a signature when the image falls? An example in PHP, and if it were in CSS or Javascript, maybe I could look for it, but so far I can not find a solution for this.

I appreciate any explanation and examples.

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

jsFiddle Demo

  • + - Adjacent selector selector supported by IE8.
  • :hover pseudoclass is used for styles of mouse elements passing through
  • Please note: if you want to use more than one heading in your document, you must use a class instead of id. Identifiers must be unique in the document.

If you need something that works in IE7, consider HTML as follows:

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

And CSS will be:

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

jsFiddle Demo

+4
source

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; }
+2
source

To influence p style when hovering over img :

 img:hover + #caption { display: block; /* or whatever...*/ }

Or:

 img:hover ~ #caption { display: block; /* or whatever... */ }

It is worth noting that in these examples, it is assumed that you have only one p element with id of caption, if you have several p elements with this id , then you need to use class instead, since id must be unique in the document.

+ is a combinator of adjacent CSS offsets and selects #caption , which immediately follows the img that the user hangs on.

~ is a combinator of common CSS common words and selects the sibling #caption element, which is a later relative of img , which hangs; regardless of any elements that may appear between them (although they must be siblings in the same parent element).

Link:

+2
source

Try using the onMouseOver and onMouseOut JavaScript events to show / hide the title, 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>
0
source

More articles:


All Articles