JS JQ 帮我改改这实现鼠标移到新增CSS样式
当鼠标移动到<dlclass="nav-item"></dl>下列新增样式<dlclass="nav-item"></dl>新增样式active<divclass="su...
当鼠标移动到 <dl class="nav-item"></dl>
下列新增样式
<dl class="nav-item"></dl> 新增样式 active
<div class="sub-nav-show">新增样式 sub-nav-active
<div class="nav-show"></div> 新增样式 active
鼠标移开删除新增样式
jQuery(".nav-item").mouseenter(function(){
jQuery(this).addClass('active').siblings().removeClass('active');
jQuery('.sub-nav-show').addClass('sub-nav-active').siblings().removeClass('sub-nav-active');
jQuery('.nav-show').addClass('active').siblings().removeClass('active');
});
我自己琢磨的只能实现 <dl class="nav-item"></dl> 新增样式 active
还有下面2个没实现
<div class="sub-nav-show">新增样式 sub-nav-active
<div class="nav-show"></div> 新增样式 active 展开
下列新增样式
<dl class="nav-item"></dl> 新增样式 active
<div class="sub-nav-show">新增样式 sub-nav-active
<div class="nav-show"></div> 新增样式 active
鼠标移开删除新增样式
jQuery(".nav-item").mouseenter(function(){
jQuery(this).addClass('active').siblings().removeClass('active');
jQuery('.sub-nav-show').addClass('sub-nav-active').siblings().removeClass('sub-nav-active');
jQuery('.nav-show').addClass('active').siblings().removeClass('active');
});
我自己琢磨的只能实现 <dl class="nav-item"></dl> 新增样式 active
还有下面2个没实现
<div class="sub-nav-show">新增样式 sub-nav-active
<div class="nav-show"></div> 新增样式 active 展开
1个回答
展开全部
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<title>RunJS 演示代码</title>
<style>
.active{
color:pink;
}
.sub-nav-active{
color:red;
}
.pp{
color:green;
}
</style>
<script>
$(function(){
$(".nav-item").hover(function(){
$(this).toggleClass("active")
.siblings(".nav-item.active")
.end()
.next('.sub-nav-show').toggleClass('sub-nav-active')
.next(".nav-show").toggleClass("active");
});
});
</script>
</head>
<body>
<ul>
<li>
<dl class="nav-item">新增样式 active</dl>
<div class="sub-nav-show">新增样式 sub-nav-active</div>
<div class="nav-show">新增样式 active</div>
<dl class="nav-item">新增样式 active</dl>
<div class="sub-nav-show">新增样式 sub-nav-active</div>
<div class="nav-show">新增样式 active</div>
<dl class="nav-item">新增样式 active</dl>
<div class="sub-nav-show">新增样式 sub-nav-active</div>
<div class="nav-show">新增样式 active</div>
</li>
</ul>
</body>
</html>
追问
同样 <dl class="nav-item"></dl> 新增样式 active了
这两个还是没有变化
<div class="sub-nav-show">新增样式 sub-nav-active
<div class="nav-show"></div> 新增样式 active
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
