Keep a div from disappearing after hover while a toggled div is active (jquery)

0
votes

I have a simple div (a ☰ menu) over an image div present that appears (through opacity) when you hover over it. When you click on the ☰ menu, another div is toggled to appear, but when you move your mouse away from the image/text div, the menu disappears. Is there a way to keep the menu visible while the toggled div is active, and for it revert to standard appear/disappear on hover once the toggled div is no longer active? I would imagine it would involve adding a class to the menu div under the condition that the toggled div is active, but I'm still a beginner with JQuery so I wouldn't know how to do that if it was the case. I hope this all made sense, and if I need to clarify, let me know. Thanks!

Here's the code I've used for the above affects, by the way:

.lines* is the menu div. .sb* is the toggled div.

<script>
$(document).ready(function(){
    $(".lines").click(function(){
        $(".sb").fadeToggle(750);
    });
});
</script>

And for the markup:

<div class="container">
  <div class="avatar"><img src="{PortraitURL-128}"></div>
    <div class="lines">☰</div>
</div>

Here's a jsfiddle. https://jsfiddle.net/e5o8pmpd/2/

1
jqueryhovertoggle
Show what you have tried so we may assist with your challenge. – Mark Schultheiss
So far I haven't tried anything yet in terms of keeping the menu visible while the toggled div is active, since I don't even know where to start. If you mean putting down the code that I've used, I'll add that in a moment. – agustd

1 Answers

0
votes

Well, I've made slight changes to your CSS and remove .lines:hover css and instead I am animating using jQuery as below:

DEMO

$(document).ready(function () {
    $(".lines").click(function () {
        $(".sb").fadeToggle(750).toggleClass('open'); //toggleClass along with fadeToggle
    });
    $(".lines").mouseover(function(){
        $(this).animate({
            'opacity':'1'
        },300)
    }).mouseout(function(){
        if(!$('.sb').hasClass('open')) //Check if menu is open or not by checking whether it has open class or not
            $(this).animate({
                'opacity':'0'
            },300)
    });
});