Question

所以我有完全相同的CSS3过渡到地方，只是使用不同的标记。

一个人只是在一个包裹在锚标签中的li中使用一个图像，一个人正在使用带有锚标签的li标签，其中包含一个图形和一个figcaption ...

这是标记。

<ul class="teamProfiles">
    <li>
        <a href="#" title="Owner"><figure><img src="assets/images/players/playerKris.png" /><figcaption>Kris R</figcaption></figure></a>
    </li>
    <li>
        <a href="#" title="Owner"><figure><img src="assets/images/players/playerKris2.jpg" /><figcaption>Kris R</figcaption></figure></a>
    </li>
    <li>
        <a href="#" title="Designer & Code Ninja"><figure><img src="assets/images/players/playerJake.jpg" /><figcaption>Jake C</figcaption></figure></a>
    </li>
    <li>
        <a href="#" title="Writer"><figure><img src="assets/images/players/playerBacon.jpg" /><figcaption>Steven B</figcaption></figure></a>
    </li>
    <li>
        <a href="#" title="Laywer"><figure><img src="assets/images/players/playerJon.jpg" /><figcaption>John A</figcaption></figure></a>
    </li>
    <li>
        <a href="#" title="Accountant"><figure><img src="assets/images/players/playerAmy.jpg" /><figcaption>Amy A</figcaption></figure></a>
    </li>
    <li>
        <a href="#" title="We're Hiring"><figure><img src="assets/images/players/playerDarth.jpg" /><figcaption>You</figcaption></figure></a>
    </li>
</ul>

这是上面显示的标记的CSS。

.teamProfiles {
    width: 920px;
}
.teamProfiles > li {
    float: left;
    width: 65px;
    height: 85px;
    border: 3px solid #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .3);
    margin-left: 3%;
    display: inline-block;
}
.teamProfiles > li:first-child {
    margin-left: 0;
}
.teamProfiles > li:last-child {
    margin-right: 3%;
}
.teamProfiles figcaption {
    padding-top: 4px;
}
.teamProfiles > li > a > figure {
    width: 65px;
    height: 65px;
}
.teamProfiles > li > a {
    display: block;
    height: 85px;
    width: 65px;
    text-decoration: none;
    text-align: center;
    font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: .8em;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    color: #333;
    position: relative;
    overflow: hidden;
}
.teamProfiles > li > a::after {
    content: attr(title);
    background: rgba(0, 0, 0, .5);
    display: inline-block;
    position: absolute;
    width: 65px;
    height: 40px;
    padding-top: 25px;
    top: -20px;
    left: 0;
    color: #9ecd41;
    -webkit-transition: all .5s ease-in-out .6s;
}
.teamProfiles > li > a:hover::after {
    top: 0;
}

我错过了什么？！它让我疯狂，无法弄明白......

是的，我知道它只有-webkit-transition属性。多数民众赞成因为我在Chrome中工作以解决这个问题。我把它们全部用在了每个浏览器中并且没有任何效果。所以我刚离开这个，并且会先在Chrome中找到它。

任何试图发现我的愚蠢的帮助都会很棒！：）

Answer 1

您是否尝试删除:: after for：hover pseudo？

CSS3 Transition无法正常工作

1 个答案: