Question

我有这个

我希望只有下载按钮才能在鼠标悬停时移动。但不知何故，页脚在悬停时也随之移动。

我该如何解决这个问题？

$(document).ready(function(){
    $(".download").mouseenter(function(){
        $(".download").css("margin-top","32px");
        $(".footer").css("margin-top","18px;"); // <-- not applying
    });
    $(".download").mouseleave(function(){
        $(".download").css("margin-top","30px");
        $(".footer").css("margin-top","20px;"); // <-- not applying
    });
});

Answer 1

尝试小提琴http://jsfiddle.net/nTL9e/11/

$(document).ready(function(){
    $(".download").mouseenter(function(){
        $(".download img").css("margin-top","32px");
        $(".footer").css("margin-top","18px;");
    });
    $(".download").mouseleave(function(){
        $(".download img").css("margin-top","-1px");
        $(".footer").css("margin-top","20px;");
    });
});

如果你必须移动整个图像，那么当SET。下载为位置：相对

时

Answer 2

为什么不只是使用位置，而不是添加页边距，这就是为什么不使用位置？

$(document).ready(function(){
    $(".download").mouseenter(function(){
        $(".download").css("top","32px");
    });
    $(".download").mouseleave(function(){
        $(".download").css("top","0");
    });
});

然后添加

.download{
    position: relative;
}

小提琴：http://jsfiddle.net/nTL9e/10/

当鼠标悬停在页面上时，如何使用下载按钮停止页脚移动

2 个答案: