CSSのよくある問題と解決(3)自分でドロップダウンボックスのロジックを書いて、マウスがドロップダウンボックスを離れる時、ドロップダウンしたdivは消えます
ドロップダウンボックスマウスがドロップダウンしたボックスに置かれると、ドロップダウンボックスは消え、マウスがドロップダウンボックス内にいてもドロップダウンボックスをポップアップしたdiv内にいても、ドロップダウンボックスを浮かび上がらせるべきだったはずだ.
ドロップダウンボックス:1、hoverイベントをドロップダウンボックスとポップアップドロップダウンボックスのdivの親要素にリスニングし、2つの要素を同時にhoverイベント2を追加すると同時に、2つの要素の間の隙間を設定しすぎてはいけない.これは個人的な見方で、cssを惑わし、マウスの移動中に隙間を滑る時間はほとんど無視される.
html:
css:
js:
ドロップダウンボックス:1、hoverイベントをドロップダウンボックスとポップアップドロップダウンボックスのdivの親要素にリスニングし、2つの要素を同時にhoverイベント2を追加すると同時に、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">QQa>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">QQa>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'
});
});
},