jQuery的懸停功能不起作用

Question

的HTML

<p id="para"> This is a paragraph</p>

JS / jQuery

$("para").hover(function() {$(this).hide();}, function() {$(this).show();});

現在，我要嘗試的是當鼠標懸停在段落上時，該元素應隱藏，而當鼠標離開該元素時，該元素應再次可見。 但是，這兩段都沒有隱藏，因此沒有出現。 怎么了

Answer 1

你錯過了＃ID選擇，剛剛“對”正在尋找一個標簽<para> （這當然不會在這種情況下存在。

$("#para")

附帶一提，您通常希望在這種情況下包裹某種div （例如，具有設置的大小）等，並在其中獲取懸停事件，並顯示內部div。 使它減少“跳動”。

另外，如果您使用div進行操作，則可以使用CSS進行：

div:hover #para { display:block; }

jsFiddle CSS示例

Answer 2

您錯過了“＃”作為ID。

$("#para").hover(function() {$(this).hide();}, function() {$(this).show();});

Answer 3

假定缺少的#是OP中的錯字。.您的代碼將無法正常工作..因為隱藏元素會觸發鼠標移出。

演示： http : //jsfiddle.net/s8cpz/

Answer 4

此代碼將永遠無法工作。 當您將鼠標懸停在它上面時，它應該立即消失，對嗎？ 但是，當它消失時，鼠標仍在其上方，因此消失的p會將其注冊為mouseleave ，（它所看到的只是將光標與光標分開，無論光標是罪魁禍首，還是光標本身）無關），有效地觸發hover的mouseleave處理程序，這將無限期繼續，從而導致p快速閃爍。 您可以執行$("p").css({opacity',0.01})代替$('p').hide() 。 使用以下代碼檢查問題：

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
setTimeout(function() { $("p").hide(); },10000);
$("#para").mouseleave(function() {alert('cool');}); 
});
</script>
</head>
<body>
<p id="para"> This is a paragraph</p>

</body>
</html>

將鼠標保持在p ，10秒鍾后，當p消失時，您會看到警報彈出，表示已觸發mouseleave處理程序。

Answer 5

如果您用（'#para'）糾正（'para'），您將無法實現目標，因為當您立即隱藏p標簽時，mouseout事件會激活並運行hide（）方法，並且p標簽會開始閃爍，直到鼠標指針懸停為止。 這一些解決方案可能會有所幫助。

$("#body").hover(function(){
$("#para").css("visibility","hidden");},
            function() 
            {$("#para").css("visibility","visible");
            }
           ); 

<div id="body">
  <p id="para"> This is a paragraph</p>
<div>

演示

Answer 6

首先，您錯過了＃號，其次，當元素隱藏時，其css display屬性更改為none，因此它在頁面上不占空間， 因此鼠標不再位於其上 ，它將再次顯示。 這將創建一個無限循環。 此類錯誤純屬邏輯，有時甚至會導致較舊版本的瀏覽器崩潰。

jQuery的懸停功能不起作用

問題描述

6 個解決方案

解決方案1
3 已采納 2012-09-26 17:42:19

解決方案2
2 2012-09-26 17:42:54

解決方案3
2 2012-09-26 17:46:19

解決方案4
0 2012-09-26 17:48:50

解決方案5
0 2012-09-26 17:50:04

解決方案6
0 2012-09-26 17:52:34

jQuery的懸停功能不起作用

問題描述

6 個解決方案

解決方案1 3 已采納 2012-09-26 17:42:19

解決方案2 2 2012-09-26 17:42:54

解決方案3 2 2012-09-26 17:46:19

解決方案4 0 2012-09-26 17:48:50

解決方案5 0 2012-09-26 17:50:04

解決方案6 0 2012-09-26 17:52:34

解決方案1
3 已采納 2012-09-26 17:42:19

解決方案2
2 2012-09-26 17:42:54

解決方案3
2 2012-09-26 17:46:19

解決方案4
0 2012-09-26 17:48:50

解決方案5
0 2012-09-26 17:50:04

解決方案6
0 2012-09-26 17:52:34