悬停在 Css 中的图像上的文本

Question

大家好，我正在尝试在我正在开发的网站的网页中实现 Paper unfoding 效果。我使用 pfold jquery 插件，但我希望在悬停时出现文本，我做了很多次但没有用。这是我的代码：

HTML：

<div class="uc-container">
   <div class="uc-initial-content">
<!--<img src="fm.png" alt="FM" /> -->

<img src="fm.png" alt="Fm" title="Fm" id="hoverFm">
<p class="textSponsor">92.7 BIG FM</p>

<span class="icon-eye"></span>
</div>
<div class="uc-final-content">
<img src="fm.png" alt="FM" /> 

    <div class="title"><h4>FM</h4> <a href="http://drbl.in/dMLS" class="icon-link"></a></div>
<span class="icon-cancel"></span>
</div>
</div>

这是相同的 CSS：

#hoverFm .textSponsor{
position: relative;
margin-right: auto;
margin-left: auto;
visibility: hidden;
}

#hoverFm:hover .textSponsor{
visibility: visible;
}

当我这样做时，文本只是简单地出现在我的图片下方。我没有找到我要去的地方。当我创建一个仅包含 <img> 和 <p> 标记的新 div 时，我的图像变得越来越小（我想这是因为我为调整大小和纸张折叠效果编写的代码因此而受到阻碍，并且那么悬停时的文字也不会出现）

如果你们想看看我在做什么：

演示站点的链接是：http://tympanus.net/Development/PFold/index3.html

相同的代码可在链接中找到：http://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/comment-page-2/#comment-450779

代码的github链接是：https://github.com/codrops/PFold

我尝试了很多，但无法弄清楚，所以请帮助某人。这将不胜感激。提前致谢！！

Answer 1

#hoverFm:hover .textSponsor

这不会真的发生，因为.textSponsor 不是#hoverGM 的子，而是兄弟。您需要使用下一个选择器，即+：

#hoverFm:hover + .textSponsor

您也可以将结构更改为

<div class="uc-initial-content" id="hoverFm">
    <img src="fm.png" alt="Fm" title="Fm">
    <p class="textSponsor">92.7 BIG FM</p>

那么你原来的选择器就可以工作了，因为现在它真的是一个孩子。