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只是区分你单击的是那个