不知道悬停图片时如何显示标题 [英] 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中,也许我可以搜索它,但到目前为止我找不到解决方案。
我欣赏任何解释&
解决方案
$ b
/ *默认情况下,隐藏标题:* /
#caption {display:none; }
/ *如果标题紧挨着img,show:* /
img:hover + #caption {display:block; }
-
+
是 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; }
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; }
+
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; }
这篇关于不知道悬停图片时如何显示标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文