Question

请有人看看这个css代码。 “悬停”功能正常，但“活跃”没有。当我点击徽标时没有任何事情发生。这段代码有什么问题？

.splash-logo {
    background: transparent no-repeat;
    position: inline;
    cursor: pointer;
    pointer-events: all;
    width: 500px;
    height: 200px;
    margin: 0 auto;
    margin-left: -250px;
    left: 50%;
    top: 320px;
    background-image: url(logo.svg);
    animation: none; 
}

.splash-logo:hover {
    width: 500px;
    height: 220px;
    margin-top: -6px;
    background-image: url(logo-hover.png);
    animation: logo_hover 0.5s steps(10) forwards; 
}

.splash-logo:active {
    width: 502px;
    height: 220px;
    margin-top: -10px;
    background-image: url(logo-jammin.png);
    animation: logo_jammin 0.7s steps(16) infinite; 
}

<ul>
    <li>
         <div class="splash-logo"></div>
    </li>
<ul>

Answer 1

背景图片的网址可能不正确？如果我使用背景颜色，它似乎工作正常。

如果网址不是问题，则可能是您的动画效果。但需要查看用于判断的css代码。

＆＃13;

.splash-logo {
    background: transparent no-repeat;
    position: inline;
    cursor: pointer;
    pointer-events: all;
    width: 500px;
    height: 200px;
    margin: 0 auto;
    margin-left: -250px;
    left: 50%;
    top: 320px;
    background-image: url(logo.svg);
    background-color: yellow;
    animation: none; 
}

.splash-logo:hover {
    width: 500px;
    height: 220px;
    margin-top: -6px;
    background-image: url(logo-hover.png);
    background-color: green;
    animation: logo_hover 0.5s steps(10) forwards; 
}

.splash-logo:active {
    width: 502px;
    height: 220px;
    margin-top: -10px;
    background-image: url(logo-jammin.png);
    background-color: red;
    animation: logo_jammin 0.7s steps(16) infinite; 
}

＆＃13;

<ul>
    <li>
         <div class="splash-logo"></div>
    </li>
<ul>

＆＃13;

CSS主动选择器（动画）

1 个答案: