Question

当我将鼠标悬停在列表项上时，是否有人知道为什么我的.cd-img-overlay课程无效？

CSS：

#cd-team .cd-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(92, 75, 81, 0.9);
    opacity: 0;
    border-radius: .25em .25em 0 0;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

HTML：

<li>
    <a href="#0" data-type="member-1">
        <figure>
            <img src="images/bruce.jpg" alt="Team member 1" />
            <div class="cd-img-overlay"><span>View Bio</span></div>
        </figure>
        <div class="cd-member-info">
            John Smith <span>Founder &amp; President</span>
        </div>
    </a>
</li>

当您将鼠标悬停在团队成员上时，我似乎无法使该叠加层工作如本教程演示中所示：https://codyhouse.co/demo/side-team-member-bio/index.html

Answer 1

您可以将叠加层的不透明度更改为1，然后您就可以了。 :)它目前设置为不透明度：0表示你的悬停类。

Answer 2

您是否有悬停状态将不透明度更改为1？例如：

a:hover .cd-img-overlay { opacity: 1; }

Answer 3

将此添加到您的代码中它将起作用..它只是因为在悬停时您没有将不透明度更改为1.

 #cd-team li:hover .cd-img-overlay {
    opacity: 1;
 }

Answer 4

悬停时，您不会将不透明度更改为1。这就是问题所在的原因。使用工作URL中存在的以下代码。

.no-touch #cd-team li:hover .cd-img-overlay { opacity: 1; }

CSS覆盖效果悬停不起作用

4 个答案: