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");
});

希望这个帮助

使用FadeTo影响的JQuery MouseOver / Out单击FadeOut

1 个答案: