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

Question

Expected logic:

On mouse over main-navigation button, show - "advantage" Div container.

If user mouse over on "advantage" Div container, still show this container and allow user to click.

On mouse out of "Button" & "advantage" container - hide "advantage" Div container.

Present Behaviour:

On mouse over main-navigation button, show - "advantage" Div container.

If user mouse out of "Button", "advantage" container fade out & fade in. User cant able to click.

Not sure, which logic is missed out. If user on "advantage" container, it should not hide or fadeout.

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

Check this solution.it will work fine as per your request.

Answer 2

The main problem is that your html button style class is given with missing double quotes (").

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>

You can also use jquery for mouse actions (.mouseover() and.mouseleave()) as shown below:

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