javascript - 使用 jquery 将另一个 div 悬停时移动 div

Question

当我将一个 div 悬停在底部时，它只显示了一点点，(div 有 width:100%;)，我希望这个 div 通过鼠标悬停效果向上移动，并且同时将屏幕中央的标志向上推。我想使用 jQuery，因为没有其他方法。当鼠标离开 div 时，我希望 div 回退到隐藏状态。它们是体内的两个 div。

这是部分 html 和 css:code

我希望有人知道如何制作一个 javascript 来实现悬停功能，悬停一个 div 会移动另一个 div，然后恢复正常。

Answer 1

这有帮助吗

使用 jquery animate，您可以轻松地为 div 的移动设置动画。

<div id="box1"></div>
<div id="box2"></div>
<style type="text/css">

    #box1
    {
        width: 100px;
        height: 100px;
        background-color: red;
    }

    #box2
    {
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin-top: 10px;
    }
</style>

<script type="text/javascript">


$("#box1").hover(function(){
    //alert("hover");
    $("#box2").animate({marginLeft: "200"});

});
$("#box1").mouseleave(function(){

    $("#box2").animate({marginLeft: "0"});

});
</script>