当切换的 div 处于活动状态时，防止 div 在悬停后消失 (jquery)

Question

我在图片 div 上有一个简单的 div（☰ 菜单），当您将鼠标悬停在它上面时会出现（通过不透明度）。当你点击 ☰ 菜单时，另一个 div 会切换显示，但是当你将鼠标从 image/text div 上移开时，菜单就会消失。有没有办法在切换的 div 处于活动状态时保持菜单可见，并且一旦切换的 div 不再处于活动状态，它就会在悬停时恢复为标准 appear/disappear？我想这将涉及在切换的 div 处于活动状态的情况下向菜单 div 添加 class，但我仍然是 JQuery 的初学者，所以我如果是这样的话，我不知道该怎么做。我希望这一切都是有道理的，如果我需要澄清，请告诉我。谢谢！

顺便说一句，这是我用于上述效果的代码：

.lines* 是菜单 div。 .sb* 是切换的 div.

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

对于标记：

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

这是一个 jsfiddle。 https://jsfiddle.net/e5o8pmpd/2/

Answer 1

好吧，我对你的 CSS 做了一些小改动并删除了 .lines:hover css 并且我正在使用 jQuery 制作动画，如下所示：

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)
    });
});

当切换的 div 处于活动状态时，防止 div 在悬停后消失 (jquery)

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

jquery

toggle

hover