How to Change Click Function into Hover/MouseOver Function

Please bear with me since I am a newbie in this web development world.

I have a Hamburger Menu Button in my site and right now the only way to show the full page OffCanvas Section (and by doing so, will hide the Homepage Section) in Hamburger Menu Button is by the Click Function.

I want to change the Click Function with Hover Function to make it easier for the visitor. And if the visitor is not interested to click the options inside the OffCanvas Section, they able to exit the OffCanvas Section (and go back to the Homepage Section) using Click Function.

I tried to tweak this JavaScript code for a few times, but it didn't work.

Here is the code.

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

Any help would be much appreciated. Thank you.

Solution

There is the simple trick behind it let me suppose you use the class "offcanvas-colosed" to hide it like this

    .offcanvas-colosed{
    display:  none ;
}

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

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

in simple words take the css part of offcanavas-opened class to the hover of the closed class.

and will see the change there is no need to toggle the class