<div class="nav">
<div class="nav1 w100">
<ul>
<li><a href="">首页</a></li>
<li><a href="">走进</a></li>
<li><a href="">产品展示</a></li>
<li><a href="">新闻中心</a></li>
<li><a href="">服务支持</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">留言板</a></li>
</ul>
</div>
</div>
<script>
$(function(){
$('.nav1 li').hover(function(){
$(this).addClass('nava');
$(this).find('a').addClass('navh');
},
function(){
$(this).removeClass('nava');
$(this).find('a').removeClass('navh');
})
})
</script>
然后是css代码
然后是css代码
.nav1 ul li a{color: white}
.nava{background: white;}
.navh{color:#1d1c1c;}
遇到个问题 鼠标经过怎么让a标签里面的文字变黑,之前想到用js 追加样式,但是css水平有限,忘记怎么写了。于是换个思路用css代理里面的hover解决
.nav1 li a:hover{font-weight: bold;color: black;}
单独定义ul 里面li鼠标经过的颜色就好了
遇到个问题 鼠标经过怎么让a标签里面的文字变黑,之前想到用js 追加样式,但是css水平有限,忘记怎么写了。于是换个思路用css代理里面的hover解决
.nav1 li a:hover{font-weight: bold;color: black;}
单独定义ul 里面li鼠标经过的颜色就好了