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

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

闭关修行中......

reply all(4)
小葫芦

First of all, the poster needs to understand, 事件的绑定没有嵌套,不嵌套的.
Once an event is bound, it will always be valid and fixed.
Unless unbound.
The following method also works.

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

First of all, I suggest you write css to achieve this effect

If you insist on writing js:
Write it into css, and then addClass class name in the event
After the event is executed, there will be a callback event, and in the callback event removeClass

巴扎黑

You can use css pseudo-classes to achieve
a:link { } / Unvisited links /
a:visited { } / Visited links /
a:hover { } / When the mouse is hovering over the link /
a:active { } / The selected link /

PHPzhong

Isn’t it very easy to achieve the effect you want using CSS pseudo-classes? As for what you said, after releasing, the effects of leaving and entering are saved to css. What is the requirement for this?

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template