html - 不明白悬停图像时如何显示标题

Question

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

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

我试图在悬停图像时使用 CSS 获取标题。

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

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

我很感激任何解释和例子。

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

• + 是 Adjacent Sibling Selector , 受 IE8 支持。
• :hover伪类用于设置鼠标经过的元素的样式
• 请注意，如果您想在文档中使用多个标题，则应使用类而不是 ID。 ID 在文档中必须是唯一的。

如果您需要在 IE7 中工作的东西，请考虑这样的 HTML:

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

CSS 将是:

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

jsFiddle Demo