css - 如何控制鼠标事件?当处于down时会触发其他效果,而up的时候则会取消所有效果?
阿神
阿神 2017-04-17 11:25:51
0
4
581

点击的时候,按钮会变橙色,松开变回白色。处于点击状态时,离开会变回白色,进去又为橙色。
但松开后,离开和进入的效果被保存到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")
        }
    })
阿神
阿神

闭关修行中......

모든 응답(4)
小葫芦

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

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

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

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

巴扎黑

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

PHPzhong

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿