如圖:我想要的效果是,ul的li,移入顏色變red,移入變blue;
但是如果選中了(也就是點(diǎn)擊了)某個li,希望在點(diǎn)擊下一個li之前,這個li一直是red,就算滑鼠從它身上再次穿過,觸發(fā)移出事件,也還是要保持red,知道另一個li被點(diǎn)擊。
下面是我的程式碼,這樣的程式碼實(shí)現(xiàn)的效果只能是,點(diǎn)擊之後,當(dāng)下移出li不變blue,但是再次移入移出這個點(diǎn)擊過的li,它的顏色就不能保持red而變?yōu)閎lue了。
有沒有大神幫忙解決下=-=先提前說謝謝了
<ul class="h1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
$('.h1 li').mouseenter(function(){
$(this).css({"background":"red"})
$(this).on("click",function(){
$('.h1 li').css({"background":"blue"})
$(this).css({"background":"red"})
$(this).mouseleave(function(){
$(this).css({"background":"red"})
})
})
}).mouseleave(function(){
$(this).css({"background":"blue"})
})
</script>
4
0
0
css的位置改變一下，就能達(dá)到效果。不信你試試。 DEMO我後面有空寫一本。
js只是區(qū)分你點(diǎn)擊的是那個
目測可以利用樣式優(yōu)先級，點(diǎn)擊的時候添加的類別加!important，移入的時候添加的另一個類優(yōu)先級比點(diǎn)擊的時候添加的低~
謝邀.
HTML:
<ul class="h1">
<li class="bl">1</li>
<li class="bl">2</li>
<li class="bl">3</li>
<li class="bl">4</li>
<li class="bl">5</li>
</ul>CSS:
.bl {
background-color: blue;
}
.bl:hover{
background-color: red;
}
.clk {
background-color: red;
}JavaScript:
$('.h1>li').click(function() {
$('.clk').removeClass('clk').addClass('bl');
$(this).removeClass('bl').addClass('clk');
})這樣？
