MouseEnter и MouseLeave не работает JQuery

HTML код:MouseEnter и MouseLeave не работает JQuery

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

CSS код

.card {положение: статические; margin-top: 100px; margin-left: 100px; z-index: 10; }

.cuad {opacity: 0.3; граница: 4px сплошной черный; ширина: 40 пикселей; высота: 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(); 
});

});

Проблема с этим кодом заключается в том, что div, созданный при входе в область элемента с классом .card, мигает, потому что автоматически вызывает функцию mouseleave, в конце концов она переходит в бесконечный цикл.

Кто-нибудь видит ошибку в коде?

источник

2013-03-16 Ihor Patychenko

проблема Te Ваш Z-индекс в вашем CSS! .. Установить z-Index для класса .cuad выше, чем .card. – Daniel

Почему бы вам не использовать 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

Я пробовал, но он работает одинаково –

Измените положение: абсолютное на позицию: относительный класс .cuad и добавьте z-index = 999 .. И попробуйте еще раз ... – writeToBhuwan

Спасибо, проблема была в абсолютном положении –

Есть больше проблем в этом. Каждый раз ваш элемент воссоздается. Измените z-индекс .card и .cuav. Сделать .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 и MouseLeave не работает JQuery

ответ

Смежные вопросы