1

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

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

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

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

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

我感谢任何解释和示例。

4

4 回答 4

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

jsFiddle 演示

  • +是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; }​

​<a href="http://jsfiddle.net/pttsm/1/" rel="nofollow">jsFiddle 演示

于 2012-06-15T19:34:36.623 回答
2

你要img:hover {/* css */}

实际上，您可能想做这样的事情：

<div class="hoverme">
  <img src="image1/<?php echo $file; ?>.jpg" style="width:500px" /> 
  <span><?php echo $caption; ?></span> 
</div>

然后在你的 CSS 中：

div.hoverme span{
    display: none;
}

div.hoverme:hover span{
    display: block;
}
于 2012-06-15T19:32:55.783 回答
2

p将鼠标悬停在 上时影响样式img：

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

或者：

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

值得注意的是，这些示例假定您只有一个 p带有idof 'caption' 的元素，如果您有多个 p带有 that 的元素id，那么您需要使用 aclass代替，因为 an在文档中id 必须是唯一的。

是+CSS 相邻兄弟组合器，并选择#caption紧跟img用户悬停的 。

是~CSS 通用兄弟组合器，并选择任何被悬停#caption的后来兄弟的兄弟元素；img无论可能出现在两者之间的任何元素（尽管它们必须是同一个父元素中的兄弟姐妹）。

参考：

于 2012-06-15T19:34:40.177 回答
0

尝试使用 JavaScript 事件 onMouseOver 和 onMouseOut 来显示/隐藏标题，如下所示：

<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>
于 2012-06-15T19:41:13.383 回答