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