懸停事件隱藏在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：在hover

.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和mouseleave事件顯示DIV。您需要綁定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);