css - 如何控制鼠標(biāo)事件?當(dāng)處于down時會觸發(fā)其他效果,而up的時候則會取消所有效果?
問題描述
點擊的時候,按鈕會變橙色,松開變回白色。處于點擊狀態(tài)時,離開會變回白色,進去又為橙色。但松開后,離開和進入的效果被保存到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')} })
問題解答
回答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'); } })回答2:
首先我建議你寫css,完成這個效果
如果你非要寫js的話:寫進css里面,然后事件里面addClass 類名稱事件執(zhí)行完畢有回調(diào)事件,在回調(diào)事件removeClass
回答3:用css的偽類就可以實現(xiàn)a:link { } / 未訪問的鏈接 /a:visited { } / 已訪問的鏈接 /a:hover { } / 當(dāng)有鼠標(biāo)懸停在鏈接上 /a:active { } / 被選擇的鏈接 /
回答4:CSS偽類不是非常容易實現(xiàn)你要的效果嗎?至于你說的 但松開后,離開和進入的效果被保存到css了, 這是什么需求?
