jQuery .mouseover() (.mouseout) div is flickering

Question

i have a problem with this code (i made a jsfiddle http://jsfiddle.net/r2y8J/).

$(document).ready(function() {
 /*$(".bulletProj").mouseenter(function () {
     console.log("You're Over!");
     $(".caption").animate(
        {top: "0px"},
        300, function() {
            console.log("i slided");
        });
    });
    $(".bulletProj").mouseleave(function() {
    $(".caption").animate(
        {top: "-200px"},
        300, function() {
            console.log("i left");
        });
    });*/
    $(".bulletProj").mouseenter(function() {
       console.log("mous is over");
       $(".caption").toggle();
    }).mouseleave(function () {
       console.log("mous leaves");
       $(".caption").toggle();
  });
});

Part of the code is commented since I tried more ways.

What I want to do is to have a div with some text and a bg image, and when the mouse is over it another div should slideDown with a button. The problem is that I tried .mouseover .mouseout, .mouseeneter and .mouseleave but it keep flickering. I found that when i'm over the text it stops but if I am in a blank space of the div it continues flickering. Anyone has an idea? Thanks very much.

Solution 1

try this:

$(document).ready(function() {  
    $(".bulletProj,.caption").mouseenter(function() {              
         $(".caption").toggle();        
    }).mouseleave(function () {     
        $(".caption").hide();
    });
});

working fiddle here: http://jsfiddle.net/r2y8J/4/

I hope it helps.

Solution 2

You can easily use

.caption{pointer-events:none}

http://jsfiddle.net/r2y8J/5/

Solution 3

Try this.

$(".bulletProj").mouseenter(function() {
        console.log("mous is over");
        $(".caption").toggle();
    }).mouseleave(function () {
        console.log("mous leaves");
        stopImmediatePropagation();
        $(".caption").toggle();

    });

Comments

[CronosS]

@Commax89 Pointer-events is a nice way to do the job. But be aware that any text / link in your caption will be unselectable / unclickable.

[Commax89]

Hey this works really fine. Thank you. Only one question, why in the first selector did you gave both the .bullProj and the . caption class?

[maverickosama92]

@Commax89: flicker effect is showing because as you leave bulletProj it toggles the .caption while you standing on .caption. So you have to bind mouseover on caption too to smoothly hide/show