css - 如何控制鼠标事件？当处于down时会触发其他效果，而up的时候则会取消所有效果?

问题描述

点击的时候，按钮会变橙色，松开变回白色。处于点击状态时，离开会变回白色，进去又为橙色。但松开后，离开和进入的效果被保存到css了。怎么让完成一次点击事件后，无效掉进入与退出的效果。

$('.bottom .button').on({mousedown:function(){ $(this).css('background-color','#FD9917').css('color','white').on({ mouseenter:function(){$(this).css('background-color','#FD9917').css('color','white')}, mouseleave:function(){$(this).css('background-color','white').css('color','black')}})},mouseup:function(){ $(this).css('background-color','white').css('color','black')} })

问题解答

首先，楼主要明白，事件的绑定没有嵌套，不嵌套的。一旦绑定了事件，就一直有效，并且固定。除非解除绑定。如下方式也行。

var flag = 0; $('.bottom .button').on({mousedown:function(){ $(this).css('background-color','#FD9917').css('color','white'); flag = 1;},mouseup:function(){ $(this).css('background-color','white').css('color','black'); flag = 0;}, mouseenter:function(){ if (flag==1)$(this).css('background-color','#FD9917').css('color','white'); }, mouseleave:function(){ if (flag==1)$(this).css('background-color','white').css('color','black'); } })回答2：

首先我建议你写css，完成这个效果

如果你非要写js的话：写进css里面，然后事件里面addClass 类名称事件执行完毕有回调事件，在回调事件removeClass

用css的伪类就可以实现a:link { } / 未访问的链接 /a:visited { } / 已访问的链接 /a:hover { } / 当有鼠标悬停在链接上 /a:active { } / 被选择的链接 /

CSS伪类不是非常容易实现你要的效果吗？至于你说的 但松开后，离开和进入的效果被保存到css了， 这是什么需求？