javascript - jquery的css方法和伪类：hover冲突？？？

Question

今天在网上看见了蛮不错的一个导航样式，决定自己也写一个。没想到出了bug。
问题是：我想鼠标移上去加一个背景色，但不知道为什么加了后jquery的代码就失效了，不知哪里出了问题。

html部分:

<p class="contant">

    <p class="lable">
        <span></span>
    </p>
    <ul class="nav">
        <li><a href="#">导航01</a></li>
        <li><a href="#">导航02</a></li>
        <li><a href="#">导航03</a></li>
        <li><a href="#">导航04</a></li>
        <li><a href="#">导航05</a></li>
    </ul>
</p>

css部分：

<style>
*{

padding:0;
margin: 0;

}
a{

text-decoration: none;
color: #000;

}
.contant{

float: left;
position: relative;
margin-left:194px; 

}
.lable{

position: absolute;
top: 0;
left: 0;
width: 6px;
height: 40px;
display: none;
z-index: -1;

}
.lable span{

float: left;
width: 6px;
height: 100%;
background: #f93a56;

}
.nav li{

list-style: none;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
border-top: 1px solid #eee;

}
//这里就是添加的代码
/* .nav li:hover{

background: #eee;

} */
.nav li:hover a{

color: #f93a56;

}
</style>

javascript部分：

<script>
$(function(){

$(".nav li").on("mouseenter",function(){
    var Height=$(".nav li").index(this);
    $(".lable").css("top",Height*40+Height+"px");
    $(".lable").css("display","block"); //这行代码失效
})
$(".nav").on("mouseleave",function(){
    $(".lable").css("display","none");
})

})
</script>

想问下是什么错误造成的？

Answer 1

$(".lable").css("display","block");
写成
$(".lable").show();