mouseenter и mouseleave не работают jquery

HTML-код:

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

CSS-код

.card {позиция: статическая; верхнее поле: 100 пикселей; поле слева: 100px; z-индекс: 10; }

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

});

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

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


jquery mouseenter jquery-hover mouseleave
person Ihor Patychenko    schedule 16.03.2013    source источник
comment
Проблема в вашем z-Index в вашем CSS! .. Установите z-Index для класса .cuad выше, чем .card.   -  person Daniel    schedule 16.03.2013

Ответы (2)


arrow_upward
2
arrow_downward

Почему бы вам не использовать hover

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

});
person writeToBhuwan    schedule 16.03.2013
comment
Измените position:absolute на position:relative класса .cuad и добавьте z-index=999.. И попробуйте еще раз... - person writeToBhuwan; 16.03.2013
comment
Спасибо, проблема была в абсолютной позиции - person Ihor Patychenko; 16.03.2013

arrow_upward
0
arrow_downward

С этим проблем больше. Ваш элемент воссоздается каждый раз. Измените 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);
         });
})
person Daniel    schedule 16.03.2013