mouseenter和mouseleave不适用于jquery-Java 学习之路

HTML code:

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

CSS code

.card {position：static; margin-top：100px; margin-left：100px; z-index：10; } .cuad {opacity：0.3;边框：4px纯黑色;宽度：40px;身高：40px; z-index：5; }

jQuery code ：

$(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，最后它进入无限循环 .

有没有人在代码中看到错误？

2 回答

你为什么不用 hover

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

});

回复于 2024-05-05T17:40:44+08:00

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

回复于 2024-05-05T17:40:44+08:00

mouseenter和mouseleave不适用于jquery

2 回答

相关问题