如何将点击功能更改为悬停/鼠标悬停功能答案

【问题标题】：How to Change Click Function into Hover/MouseOver Function如何将点击功能更改为悬停/鼠标悬停功能
【发布时间】：2021-07-11 12:52:31
【问题描述】：

请多多包涵，因为我是这个网络开发领域的新手。

我的站点中有一个汉堡菜单按钮，现在在汉堡菜单按钮中显示整页 OffCanvas 部分（这样做会隐藏主页部分）的唯一方法是通过点击功能。

我想用悬停功能更改点击功能，以使访问者更容易。如果访问者对点击 OffCanvas 部分内的选项不感兴趣，他们可以使用 Click Function 退出 OffCanvas 部分（并返回主页部分）。

我尝试调整这段 JavaScript 代码几次，但没有成功。

这里是代码。

jQuery('.menu-button').click(function(){
    jQuery('body').toggleClass('offcanvas-opened');
});

任何帮助将不胜感激。谢谢。

【问题讨论】：

如果你没有充分的理由学习 jQuery，我认为你最好学习 vanilla JS。

标签： javascript html jquery hamburger-menu

【解决方案1】：

背后有一个简单的技巧让我假设您使用“offcanvas-colosed”类来隐藏它像这样

    .offcanvas-colosed{
    display:  none ;
}

/* now to change it with hover just do this  */

.offcanvas-colosed:hover{
    /* just overwrite the older function */
    display:  block ;
}

简单来说就是把 offcanavas-opened 类的 css 部分放到了封闭类的 hover。

并且会看到变化无需切换类

【讨论】：