重点是逻辑,理解了就好了。先直接上html5代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标划过一级菜单,有二级菜单的就显示</title>
<script src="../js/jquery-2.2.3.js"></script>
<script>
$(function() {
$("li:has(ul)").hover(function() {
$(this).find("a:first").css("background-color","#eee");
$(this).find(".nav2").css("display","block");
},function() {
$(this).find("a:first").css("background-color","#fff");
$(this).find(".nav2").css("display","none");
});
});
</script>
</head>
<body>
<ul id="nav">
<li><a>首页</a></li>
<li><a>新闻中心</a>
<ul class="nav2">
<li><a>国内新闻</a></li>
<li><a>国外新闻</a></li>
</ul>
</li>
<li><a>产品中心</a>
<ul class="nav2">
<li><a>优惠产品</a></li>
<li><a>团购产品</a></li>
</ul>
</li>
<li><a>联系我们</a></li>
</ul>
</body>
</html>
特别要注意理解:
$(function() {
$("li:has(ul)").hover(function() {
$(this).find("a:first").css("background-color","#eee");
$(this).find(".nav2").css("display","block");
},function() {
$(this).find("a:first").css("background-color","#fff");
$(this).find(".nav2").css("display","none");
});
});
按照顺序原则执行的代码。注意hover悬浮时引起的效果即可。
好吧。今天到这里。越努力,越幸运。