mouseenter and mouseleave do not works jquery

Question

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; border: 4px solid black; width: 40px; height: 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();
});

});

The problem with this code is that the div, which is created at the entrance to the area of element with the class .card, flashes, because automatically call the function mouseleave, in the end it goes into an infinite loop.

Does anyone see a bug in the code?

Te problem is your z-Index in your CSS! .. Set z-Index for class .cuad higher than .card. — Daniel, Mar 16 '13 at 17:28

score 2 · Accepted Answer · answered Mar 16 '13 at 17:12

2

Why dont you use hover

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

});

answered Mar 16 '13 at 17:12

writeToBhuwan

3,233
11
39
67

Change the position:absolute to position:relative of the .cuad class and add z-index=999.. And try again... – writeToBhuwan Mar 16 '13 at 17:21
Thanks, the problem was in absolute position – Ihor Patychenko Mar 16 '13 at 17:25

score 0 · Answer 2 · answered Mar 16 '13 at 17:53

There are more problems to this. Your element is recreated every time. Change the z-Index of .card and .cuav. Make .cuav higher that card and then

Try this:

$(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);
         });
})

mouseenter and mouseleave do not works jquery

2 Answers2