使用css的 :hover 是实现不了 li 里面还嵌套ul的样式,左图是写ul li:hover实现的效果图;
现在使用jquery来实现(左图是效果图)
<style>
ul li {
line-height: 36px;
}
.color {
color: #00f;
}
</style>
<ul class="parent">
<li class="li">000</li>
<li>
<ul class="child">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</li>
<li class="li">
<ul class="child">
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
</li>
</ul>
<script>
$("ul li").hover(function() {
var child = $(this).children();// 获取鼠标滑过的li里面有没有子元素
if (child.length == 0) {// 当获取的子元素的长度为0时,再给该li添加样式
var t = $(this).text();
$("ul li").removeClass("color");
$(this).addClass("color");
}
})
</script>