如何将点击功能改成Hover/MouseOver功能

Question

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

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

我想将点击功能更改为悬停功能，以方便访问者使用。如果访问者对单击 OffCanvas 部分中的选项不感兴趣，他们可以使用单击功能退出 OffCanvas 部分（并返回主页部分）。

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

这是代码。

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

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

背后有一个简单的技巧让我假设你使用 class "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 class 的 css 部分移至关闭的 class.

的悬停位置

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

如何将点击功能改成Hover/MouseOver功能

How to Change Click Function into Hover/MouseOver Function

html

javascript

jquery

hamburger-menu