JQuery 鼠标悬停/淡出与淡入淡出影响单击与淡出

Question

我正在尝试使用JQuery来使用固定在浏览器左侧的Bootstrap按钮。 它旨在打开一个消息框供人们聊天。 按钮需要大约一半不透明度，因此它不会在浏览器上占据该点。 我已经为按钮编写了测试代码，但mouseover和mouseout正在影响click。 因此，使用mouseover和mouseout处理程序，当我单击按钮时，它会消失并立即返回。 如果我注释掉两个鼠标事件处理程序，则fadeOut正常工作。 有没有办法解决这个问题，以便fadeOut正常工作？

$("#testButton").mouseover(function() {
    $("#testButton").fadeTo("fast", 1);
});
$("#testButton").mouseout(function() {
    $("#testButton").fadeTo("fast", 0.5);
});
$("#testButton").click(function() {
    $("#testButton").fadeOut("fast");
});

Answer 1

您可以使用 css 像这样切换按钮的不透明度

#testButton{ opacity :0.5};
#testButton:hover{ opacity :1};

然后JavaScript只能点击

$("#testButton").click(function() {
    $("#testButton").fadeOut("fast");
});

希望这个帮助