0

嘿伙计们，我正在尝试在我正在开发的网站的网页中实现 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

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

4

1 回答 1

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>

然后您的原始选择器将起作用，因为现在它确实是一个孩子。

于 2013-09-29T18:39:01.920 回答