jquery:给元素添加mouseover,mouseout,click

Question

<ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>

$("ul li").on({
        mouseover: function () {
            $(this).css("color", "#fff")
        },
        mouseout: function () {
            $(this).css("color","")
        },
        click: function () {
            $(this).css("color", "#fff").siblings().css("color","")
        },
    })

1：鼠标移入后字体变白色，鼠标移出后字体恢复原来颜色。

2：鼠标点击后字体变成白色，同类恢复原来颜色

目前遇到的问题是鼠标移出后触发mouseout事件 导致无法持续显示click效果

求前辈们解答 ，新人一个 目前正在学习jquery。本来css：hover 就可以

但是我想弄清楚 谢谢

Answer 1

点击后去除它的鼠标移除事件