mouseenter 和 mouseleave 不起作用 jquery答案

【问题标题】：mouseenter and mouseleave do not works jquerymouseenter 和 mouseleave 不起作用 jquery
【发布时间】：2013-03-05 07:58:21
【问题描述】：

HTML 代码：

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

CSS 代码

.card{位置：静态；边距顶部：100px；左边距：100px； z 指数：10； }

.cuad{ 不透明度：0.3;边框：4px纯黑色；宽度：40px；高度： 40像素； z指数：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函数，最后进入了死循环。

有人看到代码中的错误吗？

【问题讨论】：

问题在于 CSS 中的 z-Index！ .. 将 .cuad 类的 z-Index 设置为高于 .card。

标签： jquery jquery-hover mouseenter mouseleave

【解决方案1】：

你为什么不用hover

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

});

【讨论】：

将 .cuad 类的 position:absolute 更改为 position:relative 并添加 z-index=999.. 再试一次...
谢谢，问题出在绝对位置

【解决方案2】：

这有更多的问题。每次都会重新创建您的元素。更改 .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);
         });
})

【讨论】：