HTML
.nav放置多个li菜单，默认显示子级img，隐藏h1,h2
![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
附件
<div class="nav">
<ul class="clearfix">
<li>
<a href="https://jy.tp.yuanmeng.life/js">
<p><img src="images/nav1.jpg" alt=""/></p>
<div class="navdq">
<h1>首页</h1>
<h2>HOME</h2>
</div>
</a>
</li>
</ul>
</div>菜单.nav子级a 标签悬浮时和当鼠标离开时触发：
$('.nav li a').hover(function() {
$('.navwz', this).stop().fadeIn(200);//隐藏当前图片菜单
$('.navwz h1', this).stop().animate({'top': '0'}, 400);//显示文字
$('.navwz h2', this).stop().animate({'top': '0'}, 400);
}, function() { //鼠标离开菜单时，效果相反
$('.navwz', this).stop().fadeOut(400);
$('.navwz h1', this).stop().animate({'top': '-43px'}, 400);
$('.navwz h2', this).stop().animate({'top': '43px'}, 400);
})
qfzy();function qfzy() {
if ($(window).width() > 1003) {
var nav = jQuery(window).width();
} else {
var nav = 1003;
}
var nav_single = nav / 7;
$('.nav').width(nav);
$('.nav li').width(nav_single);
}*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
