jQuery顯示功能不起作用

我想簡單地從隱藏的導航div開始，然後在鼠標懸停在其上時顯示它們。jQuery顯示功能不起作用

我已經嘗試使用.show（）和.hide和.toggle .hover函數。我還嘗試了使用show和hide以及切換功能的mouseeneter和mouseleave功能。

真的很奇怪的是我可以讓它反向工作。我可以將它隱藏在鼠標上並在鼠標出口顯示，雖然它在鼠標位於div內時閃爍。

這是HTML和jQuery：

<html> 

<head><title>Divs</title> 

    <link rel="stylesheet" type="text/css" href="reset.css" /> 

    <link rel="stylesheet" type="text/css" href="divs.css" /> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 

    <script type="text/javascript"> 



     $(document).ready(function() { 

      $("div.nav").mouseenter(function(e) { 
       e.stopPropagation(); 
       $(this).show(); 
      }).mouseleave(function(e) { 
       e.stopPropagation(); 
       $(this).hide(); 
      }); 

     }); 

    </script> 

</head> 


<body> 


    <div id="mask"> 

     <div id="leftNav" class="nav"></div> 

     <div id="rightNav" class="nav"></div> 

    </div> 


</body> 

</html>

這是我嘗試使用了.hover函數的代碼：

$("div.nav").hover(function() { 
       $(this).toggle(); 
      }, function() { 
       $(this).toggle(); 
      });

這是CSS：

div#mask { 
    position:relative; 
    width:100%; 
    height:100%; 
    background-color:#4b4747; 
} 

div.nav { 
    display:none; 
} 

div#leftNav { 
    background-color:red; 
    width:10%; 
    height:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:8000; 
} 

div#rightNav { 
    background-color:red; 
    width:10%; 
    height:100%; 
    position:absolute; 
    top:0; 
    right:0; 
} 

div#pictures { 
    display:none; 
}

我已經嘗試過每種方法的多種變化。我在這裏錯過了什麼？

來源

2012-07-21 Beamer180

可以jsfiddle.net呢？ – mfadel 2012-07-21 05:23:33

[這裏是使用不透明度的工作小提琴。]（http://jsfiddle.net/Ohgodwhy/GXtzF/） – Ohgodwhy 2012-07-21 05:29:50

不能元素上使用.hover()或其他鼠標相關的事件與display: none這就是一個元素被設置爲與.hide()和你的CSS最初設置它。這些元素不會收到鼠標事件，因此您將永遠不會收到初始的.hover()或其他鼠標事件事件。

您可以更改邏輯以將不透明度淡化爲零而不是隱藏它們。這將使他們不可見，但他們仍然會收到鼠標事件。

更改爲：

div.nav { 
    opacity: 0; 
}

和：

$(document).ready(function() { 

     $("div.nav").hover(function(e) { 
      e.stopPropagation(); 
      $(this).animate({opacity: 1}); 
     }, function(e) { 
      e.stopPropagation(); 
      $(this).animate({opacity: 0}); 
     }); 

    });

使用不透明之間使用隱藏的主要區別/節目是元素仍然會在你的頁面佔據的空間設置不透明度時（這就是爲什麼它仍然可以接收事件），但是當你隱藏（）它時，它將不再佔用頁面中的任何空間（這就是爲什麼它沒有收到任何鼠標事件）。

來源

2012-07-21 05:23:42 jfriend00

謝謝。現在你說出來了，這似乎很明顯。 – Beamer180 2012-07-21 06:00:25

請將MouseEnter事件對於其他元素的 becase的leftnav和rightnav第一時間顯示沒有，你不能riase的MouseEnter對於這個

來源

2012-07-21 05:33:46 user1542199

jQuery顯示功能不起作用

回答

相關問題