Javascript 如何使用jquery将鼠标悬停在另一个div上来滑动div？

我在这里有一些代码，但无法找到如何实现这一点，因为我对javascript和jquery还很陌生。我将有一个演示下面，所以你可以看到我正在进行。在演示中，有一个div定位为

左：-60px

，因此它是隐藏的，这个div还有一个'show'类，它将div定位为

左：0

还有一个长黑框，它是另一个div。我想这样做，当你将鼠标悬停在长黑框上时，它将激活另一个div的'show'属性。这是我的代码：

var$showSidemenu=$（“#sidemenu”）；
var$sidemenuShowButton=$（“#sidemenuShowButton”）；
功能（showSidemenu）{
$showSidemenu.onmouseover（$sidemenuShowButton.addclass（'show'）；
}

#侧菜单显示按钮{
宽度：60px；
身高：100%；
背景：#000000；
排名：0；
左：0；
位置：固定；
}
#副菜单{
宽度：60px；
身高：100%；
背景色：#383D3F；
位置：固定；
排名：0；
左：-60px；
浮动：左；
z指数：0；
}
#侧菜单。显示{
左：0；
}

---

使用JQuery的显示和隐藏功能。如果将

#侧菜单设置为
显示：无。然后使用此功能，它将工作：

$('#sidemenu').mouseenter(function(){
    $("#sidemenuShowButton").show();
}).mouseleave(function(){
    $("#sidemenuShowButton").hide();
});

以这种方式不需要类。
您的JS应该如下所示：

var $showSidemenu = $('#sidemenu');
var $sidemenuShowButton = $('#sidemenuShowButton');

$sidemenuShowButton.on('mouseover', function(){
   $showSidemenu.addClass('show')
});

首先，您使用的函数从未使用过，也无法使用，因为它没有名称。其次，jQuery中没有
onmouseover
方法（请阅读手册；-）。第三，您必须向其传递一个回调函数，当“mouseover”事件发生时将涉及该函数

如果你想在鼠标离开时隐藏你的div

$showSidemenu.on('mouseleave', function(){
    $showSidemenu.removeClass('show')
});

在这种情况下，您应该使用$showSidemenu而不是$sidemenuShowButton，因为当$showSidemenu单击鼠标离开$sidemenuShowButton并进入$showSidemenu时。但如果您想使用css3动画，最好将显示div嵌套以控制div并使用事件抖动

和
试试这个jQuery：

var $showSidemenu = $('#sidemenu');
var $sidemenuShowButton = $('#sidemenuShowButton');

$(document).ready(function(){
    $sidemenuShowButton.on('mouseover',function(){
        $('#sidemenu').addClass("show");
    });
    $sidemenuShowButton.on('mouseout',function(){
        $('#sidemenu').removeClass("show");
    });

    // to make the showed div stay while the mouse is still over it

    $('#sidemenu').on('mouseover',function(){
        $(this).addClass("show");
    });
    $('#sidemenu').on('mouseout',function(){
        $(this).removeClass("show");
    });
});

如果您想要一点动画，您可以使用以下动画：

#sidemenu {  
  transition: 1s;
}

解决方案：使用mouseover和mouseout事件添加和删除类“show”

我特意在showSidemenu上添加了mouseout事件，因为当它滑入时，它会越过sidemenuShowButton div并位于其上方，因此将mouseout连接到sidemenuShowButton将导致闪烁效果


正在工作的JS小提琴示例：
您想要某个动画吗？或者你只是想让它显示出来？想一想，是的，可能需要一个稍微超时的函数来配合它我不想要一个点击函数我需要一个鼠标覆盖函数类是一个很好的方法，因为你可以在那里添加css3动画。
$sidemenuShowButton.mouseover(function(){
    $showSidemenu.addClass("show");
}
);

$showSidemenu.mouseout(function(){
    $showSidemenu.removeClass("show");
}
);