在懸停事件上隱藏div

Question

我想在懸停事件上隱藏div“樣本”，並且需要在mouseout上顯示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

在hover隱藏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是.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的文檔 ：

將一個或兩個處理程序綁定到匹配的元素，以在鼠標指針進入和離開元素時執行。

.hover（handlerIn，handlerOut）

因此，您可以這樣做（ 嘗試一下 ）：

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

等效於：

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