javascript - 这个hover如何实现？
本文介绍了javascript - 这个hover如何实现？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
当三级菜单出现的时候，一级菜单当前元素同辈元素hover失效；三级菜单关闭的时候，一级菜单hover恢复
我现在只知道失效$(this).siblings().unbind('mouseenter').unbind('mouseleave');
但是三级菜单关闭后同辈元素的hover失效，怎么恢复？
<div class="menu2_simple" style="position: fixed;display: none; margin-top: 200px;">
<dl>
<dt title="定价策略" class="">
<i class="icon iconfont font30 red price_plans"></i>
<div class="menu2_simple_second price_plans_content">
<ul>
<li class="menu2-a-wrap"><a href="javascript:;" class="font12 lightgrey">自动调价</a></li>
</ul>
</div>
</dt>
<dt title="销售工具" class="">
<i class="icon iconfont font30 red sale_tools"></i>
<div class="menu2_simple_second sale_tools_content" style="top: 30px">
<ul>
<li class="menu2-a-wrap">
<a href="javascript:;" class="font12">选择定金模式</a>
<div class="menu2-a-con tooltip-only-arrow default right" style="display: none;"><div class="tooltip-arrow"><div class="tooltip-arrow cover"></div></div><div class="tooltip-inner"><i class="sui-icon icon-tb-close close"></i><p><strong class="bill"><span>当天支付订单金额的 <em class="font16 red today_price">3</em>%,余额请在 <em class="font16 red balance_price">3</em>个工作日内付清到账</span></strong>
</p>
<p>注：余额未在上述约定时间期限内付清到账，系统会自动撤销订单。</p>
<div class="block_grey" style="border:1px dashed #ccc;">
<p class="mb5"><strong class="mr20">是否启用订金模式设置</strong>
<span class="ml40 menu2_openuse">启用</span><span class="menu2_stopuse hide">停用</span>
</p>
<p class="red mb5">开盘期间禁止操作定金模式设置！</p>
</div>
</div>
</div>
</li>
<li><a href="javascript:;" class="font12 lightgrey">设置批量优惠</a></li>
</ul>
</div>
</dt>
<dt title="资源设置" class="">
<i class="icon iconfont font30 red resc_set"><div class="menu2_simple_second resc_set_content" style="top: 20px;">
<ul>
<li class="menu2-a-wrap">
<a href="javascript:;" class="font12">设置违约金</a>
<div class="menu2-a-con tooltip-only-arrow default right" style="left: 80px;top: -55px; display:none;"><div class="tooltip-arrow"><div class="tooltip-arrow cover"></div></div><div class="tooltip-inner" style="width: 655px;"><i class="sui-icon icon-tb-close close"></i><div class="clear"><div class="fl" style="width: 440px; border-right: 1px dashed #ccc;"><p class="mb10 red font16">订单违约金收取方式</p><p class="chargeways_price"><input type="radio" checked="checked" name="radio" disabled="disabled">按金额收取，客户违约后按照订单总金额的 <select name="" style="width: 50px;" class="penalty"><option value="">9</option></select>%征收违约金 </p><p class="chargeways_order"><input type="radio" name="radio" disabled="disabled">按订单收取，客户违约后按照每个订单 <span>500</span>元征收违约金 </p>
</div>
<div class="fl pl20" style="width: 185px; line-height: 25px;"><i class="sui-icon icon-notification red font18 mr5"></i>当前是按<span>金额9%</span>收取违约金，修改设置后，第2天生效。 </div>
</div>
</div>
</div>
</li>
<li class="menu2-a-wrap"><a href="javascript:;" class="font12">编辑明细</a></li>
<li class="menu2-a-wrap"><a href="javascript:;" class="font12 lightgrey">设置后结算</a></li>
<li class="menu2-a-wrap"><a href="javascript:;" class="font12 lightgrey">取消后结算</a></li>
</ul>
</div></i>
</dt>
</dl>
</div>
$('.menu2-a-wrap-simple a').click(function() {
$('.menu2-a-wrap-simple a').removeClass('current');
$(this).addClass('current');
$('.menu2-a-conn').hide();
$(this).next('.menu2-a-conn').show();
$('.menu2_simple').css("z-index", 1000);
$('.blackMask_simple').show();
})
$('.menu2-a-conn .close').click(function() {
$(this).parents('.menu2-a-conn').eq(0).hide();
$('.menu2-a-wrap-simple a').removeClass('current');
$('.menu2_simple').css("z-index", 0);
$('.blackMask_simple').hide();
})
$('.menu2_simple dt').each(function(){
$(this).hover(function(){
$('.menu2_simple').css("z-index", 1000);
$(this).addClass('bg_red');
$(this).children().eq(0).addClass('c_fff');
$(this).siblings().removeClass('bg_red');
$(this).siblings().children().eq(0).removeClass('c_fff');
$(this).children().eq(1).show();
$(this).siblings().children().eq(1).hide();
},function(){
if ($('.menu2-a-conn').is(":visible")) {
**$(this).siblings().unbind('mouseenter').unbind('mouseleave');**
} else{
$('.menu2_simple_second').hide();
$(this).removeClass('bg_red');
$(this).children().eq(0).removeClass('c_fff');
}
});
})
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{display: block;}
div div div{display:none;}
div ul{display:none;}
div:hover>div{display: block;padding-left:30px;}
div:hover>ul{display: block;padding-left:30px;}
div:hover>p{display: block;padding-left:30px;}
</style>
</head>
<body>
<div>
<div>我是第一个
<div>我是内容一
<ul>
<li>1111111111</li>
<li>123123</li>
</ul>
<p>啦啦啦啦啦</p>
</div>
<div>我是内容二十</div>
</div>
<div>111111111111111111
<div>我什么都没有</div>
</div>
<div>22222222222222222222222222
<div>asdasd有</div>
</div>
<div>333333333333333333333333
<div>我456456456有</div>
</div>
<div>3344444444444444444444
<div>我46456456423123有</div>
</div>
<div>45555555555555555555555
<div>我4567863694949494有</div>
</div>
</div>
</body>
</html>
1。正常的嵌套。用hover去做。
2。用settimeout把隐藏显示做延时这篇关于javascript - 这个hover如何实现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
