Question

我对网络开发有点新意，所以请原谅我，如果我的术语已经关闭或者某些事情显而易见，但我在搜索中无法找到解决方案。这个问题如下：我有一个网页，我正在显示我创建的一些图标或成功更改的“精灵”（我相信正确的术语），即背景移动多个像素以显示彩色悬停时图像的部分（最初为灰色）。当我致电.social-slide:hover时，会在下面反映出来。然而，我想要完成的是在一段时间（保持悬停功能）之后进行“更改”，例如页面加载时或10秒后。 IE：

.img-hover {background-image: url('images/img-hover.png'); background-position: 0px -48px;} - 5秒钟后 .img-hover2 {background-image: url('images/img-hover2.png'); background-position: 0px -48px;} - 10秒后

（当然它应该在该移动之后恢复到原来的灰色状态。）我发现了一些定时的CSS属性，但很多都与动画在被调用或被发生后有关。是否有财产或方法来启动图标以“触发”或更改我可以通过CSS或Javascript拨打的电话？在此先感谢，再次抱歉，我有点新手。

我的style.css：

.social-slide {
height: 48px;
width: 48px;
margin: 10px;
float: left;
display: inline-block;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-slide:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.img-hover {
background-image: url('images/img-hover.png');
}

Answer 1

你需要javascript才能做到这一点。添加超时的类。将正确的id添加到您希望它生效的元素中，以便javascript选择正确的ID。

这是一个plunkr演示：http://plnkr.co/edit/RwQf2mrI1SsDe2ykvyFs

    <li>
<a id="five-delay" href="https://twitter.com/share" class="twitter-hover social-slide" data-size="..." data-hashtags="..."></a>
</li>

    (function(window, document){
        //this will select the element you want to add the class to
        var fiveSecondDelay = document.getElementById('five-delay');

        //this function executes on page load
        window.onload = function(){
            //this calls the passed in function after X delay, 5 seconds in this case
            setTimeout(function(){
               //this will add the classes to the element after the 5 second delay
               fiveSecondDelay.className += 'twitter-hover social-slide';
            }, 5000);
        }
    })(window, document);

经过持续时间后通过CSS触发图标/图像移动

1 个答案: