昨天在寫一個項目的時候發現了一個比較蛋疼的問題。就是在寫一個鼠標移入移出的效果的時候發現在用mouseover和mouseout會有些詭異的效果
就是在鼠標移入更多的時候會出現一個下拉框，需求是當鼠標離開下面的框框后再消失，但是當鼠標一旦移到下面的框框的時候整個框框就消失了。最開始我用的是hover（）方法，如下：
$(function(){$("#header .more1").hover(function(){
$("#header .more").show();
},function(){
$("#header .more").hide();
})
})
但是 一點都不管用，mouseover和mouseout方法和hover一樣就不說了，然后我又用了mouseenter和mouseleave方法，當我滿心鼓舞的發現可以解決問題的時候新的問題又來了，就是在離開更多這個選項框的時候下面的框框並不會消失
那我就是只有用click()了 代碼如下：
//click方法
(function(){
var more=$("#header .more1");
more.bind("click",function(){
if ($("#header .more").is(":visible")) {
$("#header .more").hide();
}else{
$("#header .more").show();
}
})
})();
只有這樣才能實現，也是夠蛋疼的，也許是我還沒找到錯誤的地方吧；貼出完整代碼：
//html部分
<div id="header" class="gradient">
<p class="city">
切換區域：
<a href="###">西湖區</a>
<a href="###" class="active">東湖區</a>
<a href="###">青山湖區</a>
<a href="###">青雲譜區</a>
<a href="###">灣里區</a>
<a href="###" class="more1">更多</a>
</p>
<p class="more">
<a href="###">新建縣</a>
<a href="###">安義縣</a>
<a href="###">南昌縣</a>
<a href="###">進賢縣</a>
</p>
</div>
//css部分
#header .more{
width: 190px;
height: 70px;
position: absolute;
top:30px;
left: 350px;
z-index: 4;
background: #F7F7F8;
display: none;
}
#header .more a{
display:inline-block;
padding:0 7px;
margin: 5px 3px;
height:18px;
line-height:18px;
color:#999;
background:#fff;
border:1px solid #e5e5e5;
border-radius:4px;
box-shadow:1px 1px 0 #ededed;
}
//js部分
// (function(){
//
var more=$('#header .more1');
//
var more_a=$('#header .more');
//
more.mouseenter(function(){
//
$('#header .more').css('display','block');
//
})
//
more_a.mouseleave(function(){
//
$('#header .more').css('display','none');
//
})
// })();
順便再說下mouseenter和mouseover，mouseleave和mouseout的區別：
1.不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。
2.只有在鼠標指針離開被選元素時，才會觸發 mouseleave 事件。