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了， 這是什么需求？