mouseleave not always triggered when my button is hovered

Question

I use this code to highlight my button when mouse hover:

$("#fileupload").mouseenter(function () {
    $("#myLink").css("background-color", "#495461");
}).mouseleave(function () {
    $("#myLink").css("background-color", "#3C454F");
});  

It works but when this button is clicked (so the mouse is hover) a modal window is showed to select files thus in this cas the mouseleave is never proceed.

My question: how to fix this to have my background color back to 'normal' (#3C454F) when this modal is showed. I prefer avoid placing some code behind the click of this button but keep everything concentrate in one bloc of code like above because here I simplify the problem...

Answer 1

This should be done with CSS, and :hover pseudo-classes.

Just add this CSS rules to your style.

#myLink {
  background-color:  #495461;
}

#myLink:hover {
  background-color:  #3C454F;
}

Answer 2

Just use .hover() instead:

$("#fileupload").hover(
    function () {
        $("#myLink").css("background-color", "#495461");
    },
    function () {
        $("#myLink").css("background-color", "#3C454F");
    }
);

jQuery Documention for .hover()

Answer 3

Use JQuery hover instead, it should work.

your code should be:

$("#fileupload").hover(
    function () {
        $("#myLink").css("background-color", "#495461");
    },
    function () {
        $("#myLink").css("background-color", "#3C454F");
    }
);

Answer 4

将相同的行为从$("#fileupload').mouseleave到$("#myLink").click事件

Answer 5

Your code is working perfect.

It is just colors used by you are not identified clearly. #495461 and #3C454F are displayed in same shade

Check the fiddle demo