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中，也许我可以搜索它，但到目前为止我找不到解决方案。

我感谢任何解释＆amp;实例

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。 Ids在文档中必须是唯一的。

如果您需要在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

Answer 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;
}

Answer 3

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

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

或者：

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

值得注意的是，这些示例假设您只有一个带有p“标题”的 id元素，如果您有多个p的{{1}}元素，然后您需要使用id，因为class 必须在文件中是独一无二的。

id是CSS邻近兄弟组合子，并选择紧跟用户悬停的+之后的#caption。

img是CSS通用兄弟组合子，并选择任何兄弟~元素，它是#caption的后代兄弟;不管它们之间可能出现的任何元素（尽管它们必须是同一父元素中的兄弟姐妹）。

参考：

CSS selectors, at the W3.org。

Answer 4

尝试使用onMouseOver和onMouseOut上的JavaScript事件来显示/隐藏字幕，如下所示：

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

不知道如何在悬停图像时显示标题

4 个答案: