по событию парения скрыть DIV

Question

Я хочу, чтобы скрыть Div 'образец' на события парения и нужно показать DIV 'образец' на отведении указателя мыши

$('.secmenu').hover(function() { 
 

 
    $('.sample').css('opacity', '0'); 
 
    if ($('.secmenu').mouseleave()) { 
 
    $('.sample').css('opacity', '1'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="" class="secmenu">click</a> 
 
<div class="sample"> 
 
    hello div sample text content hello div sample text content 
 
</div>

Answer 1

$('.secmenu').mouseenter(function() {//hide div on mouse enter 
 
    $('.sample').hide(); 
 
}).mouseleave(function() {//show div on mouse leave 
 
    $('.sample').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="" class="secmenu">click</a> 
 
<div class="sample"> 
 
    hello div sample text content hello div sample text content 
 
</div>

Answer 2

Это можно сделать в css. Нет необходимости в JQuery:

.secmenu:hover + .sample { 
 
    display: none; 
 
}

<a href="" class="secmenu">click</a> 
 
<div class="sample"> 
 
    hello div sample text content hello div sample text content 
 
</div>

Answer 3

Скрыть DIV на hover и показать DIV на mouseleave событие. Вам необходимо связать событие mouseleave, не записывая его в if.

$(document).ready(function() { 

    $('.secmenu').hover(function() { 

     $('.sample').css('opacity', '0'); 

    }); 
    $('.secmenu').mouseleave(function() { 
     $('.sample').css('opacity', '1'); 
    }); 
}); 

Answer 4

Попробуйте это:

$('.secmenu').on('mouseenter',function() { 
 
    $('.sample').css('opacity', '0'); 
 
}).on('mouseleave',function(){ 
 
    $('.sample').css('opacity', '1'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="" class="secmenu">click</a> 
 
<div class="sample"> 
 
    hello div sample text content hello div sample text content 
 
</div>

Answer 5

Если .sample немедленно следующий родственный .secmneu вам не нужно JavaScript или JQuery для этого. Вы можете сделать это с помощью чистого CSS.

.sample { 
 
    transition: opacity 0.25s ease; 
 
    opacity: 0; 
 
} 
 
.secmenu:hover + .sample { 
 
    opacity: 1; 
 
}

<a href="" class="secmenu">click</a> 
 
<div class="sample"> 
 
    hello div sample text content hello div sample text content 
 
</div>

Answer 6

В соответствии с jQuery's documentation:

переплет один или два обработчика к соответствующим элементам, должны быть выполнен, когда указатель мыши входит и выходит элементов.

.hover (handlerIn, handlerOut)

Таким образом, вы можете сделать это следующим образом (try it out):

$('.secmenu').hover(
    function() { 
    $('.sample').hide(); 
    }, 
    function() { 
    $('.sample').show(); 
    } 
); 

Что эквивалентно:

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);