javascript - 鼠标悬停时显示/隐藏 DIV 容器

Question

预期逻辑:

将鼠标悬停在主导航按钮上，显示 - “优势”Div 容器。

如果用户将鼠标悬停在“advantage”Div 容器上，仍然显示该容器并允许用户单击。

当鼠标移出“Button”和“advantage”容器时 - 隐藏“advantage”Div 容器。

当前行为:

将鼠标悬停在主导航按钮上，显示 - “优势”Div 容器。

如果用户鼠标移出“按钮”，“优势”容器会淡出和淡入。用户无法单击。

不确定，遗漏了哪个逻辑。 如果用户使用“优势”容器，它不应隐藏或淡出。

HTML:

<div class="main-navigation">
 <a href="javascript:void(0);" class="button">Button</a>
</div>

<div class="advantage">
  <div class="content">
    <p>demo content to load <a href="http://www.google.com">test</a></p>
  </div>
</div>

JS:

$('.main-navigation .button').on('mouseover', function(){
    $('.advantage).fadeIn(400);
});

$('.main-navigation .button').on('mouseleave', function(){
    $('.advantage).fadeOut(800);
}).find("button, a").on("click", function (e) {
    e.stopPropagation(); 
});

Answer 1

    <div class="fadebox">
            <div class="main-navigation">
                <a href="javascript:void(0);" class="button">Button</a>
            </div>
            <div class="advantage" style="display: none;">
                <div class="content">
                    <p>demo content to load <a href="http://www.google.com">test</a></p>
                </div>
            </div>
        </div>
 $('.main-navigation .button').on('mouseover', function (e) {
                $('.advantage').fadeIn();
                $('.advantage').find("button, a").on("click", function (e) {
                    e.stopPropagation();
                });`enter code here`
            });
            $('.fadebox').on('mouseleave', function () {
                $('.advantage').fadeOut();
            })

检查此解决方案。它将按照您的要求正常工作。