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

.h1 li {
    background-color: blue;
}
.h1 li:hover{
    background-color: red;
}
.chosen {
    background-color: red!important;
}

js:

$('.h1 li').click(function() {
    $('.h1 li').removeClass('chosen');
    $(this).addClass('chosen');
})

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

这样？