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

时间:2014-04-18 11:25:47

标签: javascript jquery css

我有这个

http://jsfiddle.net/nTL9e/4/

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

我该如何解决这个问题?

$(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
    });
});

2 个答案:

答案 0 :(得分:0)

尝试小提琴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。下载为位置:相对

答案 1 :(得分:0)

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

$(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/