user3386779 user3386779 - 5 months ago 6
CSS Question

on hover event hide the div

I want to hide the div 'sample' on hover event and need to show the div 'sample' on mouseout



$('.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

$('.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>

Comments