悬停我的按钮时，并非总是触发mouseleave

Question

当鼠标悬停时，我使用以下代码突出显示我的按钮：

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

它可以工作，但是当单击此按钮（使鼠标悬停）时，将显示一个模式窗口来选择文件，因此在这种情况下，永远不会进行鼠标离开。

我的问题：当显示此模态时，如何解决此问题，使我的背景色恢复为“正常”（＃3C454F）。 我宁愿避免在单击该按钮后放置一些代码，但将所有内容集中在上面的一个代码块中，因为在这里我简化了问题...

Answer 1

应该使用CSS和:hover伪类来完成。

只需将此CSS规则添加到您的样式即可。

#myLink {
  background-color:  #495461;
}

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

Answer 2

只需使用.hover（）即可：

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

.hover（）的jQuery文档

Answer 3

而是使用JQuery 悬停 ，它应该可以工作。

您的代码应为：

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

Answer 4

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

Answer 5

您的代码运行完美。

只是您使用的颜色没有被清楚地识别。 #495461和#3C454F以相同的阴影显示

查看小提琴演示