0

HTML コード:

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

CSSコード

.card{位置: 静的; マージントップ: 100px; 左マージン: 100px; Z インデックス: 10; }

.cuad{ 不透明度: 0.3; 境界線: 4 ピクセルの黒一色。幅: 40px; 高さ: 40px; 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 を呼び出すため、フラッシュし、最終的に無限ループに陥ることです。

コードにバグが見られる人はいますか?

4

2 に答える 2

2

使わない理由hover

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

});
于 2013-03-16T17:12:29.803 に答える
0

これにはさらに問題があります。あなたの要素は毎回再作成されます。.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-16T17:53:31.060 に答える