下拉框在鼠标放到下拉出来的框的时候,下拉框消失,本应该是不管鼠标在下拉框内还是在弹出下拉框的div内,都应该使下拉框浮现 |
下拉框: 1、将hover事件监听到下拉框和弹出下拉框的div的父级元素上,即将两个元素同时添加hover事件 2、与此同时两个元素之间的缝隙不宜设置过大,这条纯属个人看法,迷惑css,在鼠标移动的过程中,滑过缝隙的时间几乎忽略不计 |
html:
<!--打印分享--> <ul id="cRightPrint"> <!--打印--> <li class="cPrint dropMenu" id="print"> Print <!--打印的下拉列表--> <ul class="printUl" id="printSelect"> <li><a href="#">打印</a></li> <li><a href="#">重印</a></li> </ul> </li> <!--分享--> <li class="cPrint dropMenu" id="share"> Share <!--分享的下拉列表--> <ul class="printUl" id="shareSelect"> <li><a href="#"><img src="img/content/icon.email.16.png">微信</a></li> <li><a href="#"><img src="img/content/icon.email.16.png">微博</a></li> <li><a href="#"><img src="img/content/icon.email.16.png">邮件</a></li> <li><a href="#"><img src="img/content/icon.email.16.png">QQ</a></li> <li><a href="#"><img src="img/content/icon.email.16.png">微信</a></li> <li><a href="#"><img src="img/content/icon.email.16.png">微博</a></li> <li><a href="#"><img src="img/content/icon.email.16.png">邮件</a></li> <li><a href="#"><img src="img/content/icon.email.16.png">QQ</a></li> </ul> </li> </ul>
css:
/*三种功能的li默认样式,以download为主*/ #cRightPrint .cPrint{ width: 154px; height: 40px; line-height: 40px; padding-left: 10px; font-weight: 800; color: #fff; background-color: #333; border-radius: 6px; margin-bottom: 6px; position: relative; } /*第二个功能print*/ #cRightPrint #print{ width: 49%; /*min-width: 80px;*/ padding: 0; text-align: center; float: left; } /*第三个功能share*/ #cRightPrint #share{ width: 49%; /*min-width: 80px;*/ padding: 0; /*margin-right: -10px;*/ text-align: center; float: right; } #cRightPrint li:hover{ background: #3C63AF; border-radius: 6px; cursor: pointer; } /*鼠标滑过菜单显示:只针对第二三个功能*/ .cPrint .printUl{ /*top: 40px;*/ width :100%; margin-top: 1px; /*padding-left: 4px;*/ border-radius: 5px; background: #3C63AF; display: none; position: absolute; } .cPrint .printUl li{ text-align: left; } .cPrint .printUl li a{ font-size: 12px; padding-left: 10px; color: #fff; } .cPrint .printUl li a:hover{ color: #A7BEE9; } /*图标*/ .cPrint .printUl li a img{ width: 12px; height: 10px; padding-right: 6px; }
js:
6、下载打印分享等鼠标滑过信息显示 printMouseOver: function () { var _self = this; // 下载鼠标效果 $("#dloadPdf_span").hover(function(){ $(".pulldown").css("display","block"); },function(){ $(".pulldown").css("display","none"); }); // 打印分享鼠标进入 $('.dropMenu').hover( function () { $(this).find('.printUl').css({ 'display': 'block' }); }, // 鼠标滑出 function () { $(this).find('.printUl').css({ 'display': 'none' }); }); },