1

我的页面中有一张图片。我想要做的是当任何人悬停在该图像上时，我想将图像缓慢移动到其左侧，同时将图像替换为另一个图像。在鼠标移出时，我想将以前的图像恢复到以前的位置。

我尝试使用以下代码，:hover但它的替换速度非常快，并且图像向左移动得不够。

请查看演示

您能告诉我如何使用 Jquery 或 CSS 来实现这一点吗？

<div class="fb-button"><a target="_blank" href="#"></a></div>

CSS

.fb-button a{
background-image:url(http://i33.tinypic.com/20svqkh.png); 
}

.fb-button a:hover{

background-image:url(http://i36.tinypic.com/n2b978.png); // replacement
}

.fb-button a, .twt-button a, .in-button a, .youtube-button a {
width: 34px;
height: 33px;
}


.fb-button a, .twt-button a, .in-button a, .youtube-button a {
display: block;
}
4

4 回答 4

3

您不需要为此使用 Javascript。

只需使用负边距和过渡。 

.fb-button a{
    background-image:url(http://i33.tinypic.com/20svqkh.png);
    /*transition*/
    -webkit-transition:margin 1s, background-image 1s;
       -moz-transition:margin 1s, background-image 1s;
         -o-transition:margin 1s, background-image 1s;
            transition:margin 1s, background-image 1s;
}
.fb-button a:hover{
    background-image:url(http://i36.tinypic.com/n2b978.png);
    margin-left:-0.5em;
}

http://jsfiddle.net/chPrK/6/

于 2013-04-23T20:37:32.217 回答
1

我不确定您向左移动的确切含义，但是您可以在使用 transition-duration 属性交换图像时实现这一点以及更长的持续时间。在下面的演示中，我将其设置为 2 秒。在悬停时，我设置了一个右边距来移动图像：

.fb-button a{
background-image:url(http://i33.tinypic.com/20svqkh.png);
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
}

.fb-button a:hover{

    background-image:url(http://i36.tinypic.com/n2b978.png);
    margin-right: 3px;
}

http://jsfiddle.net/chPrK/5/

于 2013-04-23T20:37:33.253 回答
0

您不能使用相同的对象淡出一个背景并淡入另一个背景。我建议使用这样的单独对象：

<div class="fb-button">
    <a target="_blank" href="https://www.facebook.com/bkashlimited">
        <div class="fader1 fader"></div>
        <div class="fader2 fader"></div>
    </a>
</div>

而且，这个jQuery：

$(".fb-button").hover(function() {
    $(this).find(".fader1").fadeOut();
    $(this).find(".fader2").fadeIn();
}, function() {
    $(this).find(".fader2").fadeOut();
    $(this).find(".fader1").fadeIn();
});

而且，这个CSS：

.fb-button {
    position: relative;
}

.fader {
    width: 34px;
    height: 33px;
    position: absolute;
}

.fb-button .fader1 {
    background-image:url(http://i33.tinypic.com/20svqkh.png);
}

.fb-button .fader2 {
    background-image:url(http://i36.tinypic.com/n2b978.png);
    display: none;
}
于 2013-04-23T20:30:28.253 回答
0

尝试这个：

.fb-button a{
    background-image:url(http://i33.tinypic.com/20svqkh.png);
    -webkit-transition: all 1s ease-in-out;
    left: 100px;
    position: relative;
}

.fb-button a:hover{
    position: relative;
    left: 50px;
    background-image:url(http://i36.tinypic.com/n2b978.png);
}

这里的警告是该transition属性仍然是实验性的，因此它上面有供应商特定的前缀。

不同的浏览器使用不同的前缀。例如：

  • 歌剧使用：-o-transition

  • 火狐使用：-moz-transition

  • 谷歌浏览器使用上面显示的：-webkit-transition

这些实现了常规的新功能，但现在不符合标准，尽管它们可能很快会出现，但不能保证将来会出现。

于 2013-04-23T20:34:59.367 回答