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

Question

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

Answer 1

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

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

Answer 2

首先我建議你寫css，完成這個效果

如果你非要寫js的話：
寫進css裡面，然後事件裡面addClass 類別名稱
事件執行完畢有回呼事件，在回呼事件removeClass

Answer 3

用css的偽類別就可以實作
a:link { } / 未造訪的連結/
a:visited { } / 已造訪的連結 /
a:hover { } / 當有滑鼠停留在連結上/
a:active { } / 被選取的連結/

Answer 4

CSS偽類不是非常容易實現你想要的效果嗎？至於你說的 但鬆開後，離開和進入的效果被保存到css了， 這是什麼需求？