javascript - ul的li移入後點選事件與移出事件衝突

Question

如圖:我想要的效果是,ul的li,移入顏色變red,移入變blue;
但是如果選中了(也就是點擊了)某個li,希望在點擊下一個li之前,這個li一直是red,就算滑鼠從它身上再次穿過,觸發移出事件,也還是要保持red,知道另一個li被點擊。

下面是我的程式碼,這樣的程式碼實現的效果只能是,點擊之後,當下移出li不變blue,但是再次移入移出這個點擊過的li,它的顏色就不能保持red而變為blue了。

有沒有大神幫忙解決下=-=先提前說謝謝了

<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>

Answer 1

css的位置改變一下，就能達到效果。不信你試試。 DEMO我後面有空寫一本。

js只是區分你點擊的是那個

Answer 2

目測可以利用樣式優先級，點擊的時候添加的類別加!important，移入的時候添加的另一個類優先級比點擊的時候添加的低~

Answer 3

CSS

雷雷

js:

雷雷

Answer 4

謝邀.

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

這樣？