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

Question

预期逻辑：

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

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

鼠标移出“按钮”和“优势”容器 - 隐藏“优势”Div 容器。

当前行为：

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

如果用户将鼠标移出“Button”，“advantage”容器会淡出并淡入。用户无法点击。

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

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

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

Answer 2

主要问题是您的 html 按钮样式类缺少双引号 (")。

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>

您还可以将 jquery 用于鼠标操作（.mouseover() 和 .mouseleave()），如下所示：

JS：

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