jquery 添加 css 后 hover样式失效

.funcUl li{ 
    height:35px;
    padding-left:5px;
    padding-top:5px;
    list-style: none;
    text-align: left;
    border: 1px solid gray;
    background-repeat: no-repeat;
}
li:HOVER{
    cursor: pointer;
    color: white;
    background-color: #43B4D8;
}

<ul class="funcUl">
                    <li rel = "0">&gt;&gt;管理</li>
                    <li rel = "1">&gt;&gt;管理</li>
                    <li rel = "2">&gt;&gt;管理</li>
                    <li rel = "3">&gt;&gt;管理</li>
                    <li rel = "4">&gt;&gt;管理</li>
                    <li rel = "5">&gt;&gt;销售</li>
                    <li rel = "6">&gt;&gt;通道</li>
                    <li rel = "7">&gt;&gt;比对</li>
                    <li rel = "8">&gt;&gt;公告</li>
                </ul>

<script type="text/javascript">
    $(document).ready(function(){
        $(".funcUl li").click(function(){//执行点击事件后li:hovor 效果消失？？？？
            //点击的当前对象
            var clickedObj = $(this);
            //当前li字体颜色变为白色，背景色变为青色
            clickedObj.css("color","white").css("background-color","#43B4D8");
            //其他li字体颜色变为青色，背景色变为灰色
            $(".funcUl li").not(clickedObj).css("color","#3B87EE").css("background-color","#DEE7F9");
        }); <span></span> });
</script>

不能调颜色。麻烦大家看看了。当鼠标点击LI  A时，改变 A 的样式style1  其余LI的样式为style2.这样后LI hover对于的样式失效了。