Question

预期的逻辑：

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

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

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

当前行为：

将鼠标悬停在主导航按钮上，显示-“ Advantage” 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();
            })

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

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

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

2 个答案: