如圖:我想要的效果是,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>