Показать / Скрыть контейнер DIV при наведении мыши

Question

Ожидаемая логика:

При наведении указателя мыши на кнопку основной навигации показывать «преимущество» контейнера Div.

Если пользователь наводит курсор на «преимущество» контейнера Div, по-прежнему показывать этот контейнер и разрешать пользователю щелкать.

При выводе мыши из контейнера «Кнопка» и «преимущество» - скрыть «преимущество» контейнера 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();
            })

Проверьте это решение. По вашему запросу оно будет работать нормально.

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