javascript - ul的li移入后点击事件与移出事件冲突

问题描述

问 题

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

解决方案

css的位置改变一下，就能达到效果。不信你试试。DEMO我后面有空写一个。

js只是区分你单击的是那个

这篇关于javascript - ul的li移入后点击事件与移出事件冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！