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