不知道悬停图片时如何显示标题 [英] Don't understand how to show the caption when hovering image

问题描述

我在这个例子中遇到了一些困难：

 < img src =image1 /<？php echo $ file;？> .jpgstyle =width：500px/> 
< p id =caption><？php echo $ caption; ？>< / p为H. 
  

我试图在悬停图片时使用CSS标题。

我尝试使用 a img {hover;} 和 p {hover;} 。

悬停图片时，我有办法获得标题吗？这个例子是在PHP中，如果它在CSS或Javascript中，也许我可以搜索它，但到目前为止我找不到解决方案。

我欣赏任何解释&

解决方案

  / *默认情况下，隐藏标题：* / 
 #caption {display：none; } 
 / *如果标题紧挨着img，show：* / 
 img：hover + #caption {display：block; } 
  

jsFiddle Demo

• + 是 Adjacent Sibling Selector ，支持自IE8。 ：hover 伪类用于设置鼠标移过的元素


• 请注意，如果您要在文档中使用多个标题，则应该使用类而不是标识。在文档中，ID必须是唯一的。

如果您需要可以在IE7中使用的东西，请考虑HTML如下所示：

b
$ b

 < div class =image-with-caption> 
< img src =whatever.pngstyle =width：200px/> 
< p class =caption> caption< / p> 
< / div> 
  

而CSS将会是：

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

jsFiddle Demo

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.

解决方案

/* 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

这篇关于不知道悬停图片时如何显示标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！