Question

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

然后你的原始选择器会起作用，因为它现在真的是个孩子。

文本悬停在Css中的图像

1 个答案: