的mouseenter和鼠標離開不工作的jQuery

HTML代碼：的mouseenter和鼠標離開不工作的jQuery

<body> 
    <img class="card" src="card.jpg"/> 
</body>

CSS代碼

.card {位置：靜態的; margin-top：100px; margin-left：100px; z-index：10; }

.cuad {不透明度：0.3;邊框：4px純黑色;寬度：40px;身高： 40px; z-index：5; }

jQuery代碼：

$(document).ready(function(e){ 
$(".card").mouseenter(function(e){ 
    $("body").append($("<div class='cuad'></div>").css({"position": "absolute", "top": (e.pageY-24)+"px", "left": (e.pageX-24)+"px"})); 
}); 
$(".card").mouseleave(function(e){ 
    $(".cuad").remove(); 
});

}）;

此代碼的問題在於，在類的.card區域的入口處創建的div會閃爍，因爲會自動調用函數mouseleave，最終會進入無限循環。

有沒有人在代碼中看到錯誤？

來源

2013-03-16 Ihor Patychenko

特問題是你的z-index在你的CSS！ ..設置z-Index類的.cuad高於.card。 – Daniel 2013-03-16 17:28:18

你爲什麼不使用hover

$(document).ready(function(e){ 
    $(".card").hover(function(){ 
     //Add code for mouse enter 
    }, 
    function(){ 
     // Add code for mouse leave 
    }); 

});

來源

2013-03-16 17:12:29 writeToBhuwan

我試過了，但它的工作方式相同 – 2013-03-16 17:15:16

更改位置：絕對位置：.cuad類的相對位置並添加z-index = 999 ..然後再試... – writeToBhuwan 2013-03-16 17:21:50

謝謝，問題出現在絕對位置 – 2013-03-16 17:25:43

有更多的問題這一點。您的元素每次都會重新創建。更改.card和.cuav的z-Index。請.cuav高於卡，然後

試試這個：

$(document).ready(function(e) { 
    var el = $("<div/>", { 
       class : 'cuad' 
       }); 

$(".card").hover(function(e) { 
       $("body").append(el); 
       $(el).css({ 
        position : "absolute", 
        top : e.pageY - 24, 
        left : e.pageX - 24 

       }); 

       }, function() { 
       $(".cuad").remove(el); 
     }); 
})

來源

2013-03-16 17:53:31 Daniel

的mouseenter和鼠標離開不工作的jQuery

回答

相關問題