細說mouseenter和mouseover，mouseleave和mouseout的區別！！超級蛋疼的體驗

昨天在寫一個項目的時候發現了一個比較蛋疼的問題。就是在寫一個鼠標移入移出的效果的時候發如今用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 事件。