mouseenter和mouseover的区别:

使用mouseover/mouseout时，如果鼠标移动到子元素上，即便没有

离开父元素，也会触发父元素的mouseout事件;

使用mouseenter/mouseleave时，如果鼠标没有离开父元素，在其

子元素上任意移动，也不会触发mouseleave事件;

mouseenter和mouseover的区别

mouseover/mouseenter

mouseenter和mouseover的区别

mouseenter和mouseover的区别

e.target相当于this，但是this因为冒泡原理，他随时可能变成ul的this，所以用e.target,就相当于选中唯一的li的this

<style>
			.wrap{
				position:relative;
				width:200px;
				left:50px;
				top:50px;
		
			}
		ul{
			padding:15px 0;
			margin:9;
		list-style: none;
		color:#ffffff;
		background:#6c6669;
		border-right-width: 0;
		}
		li{
			display:block;
			height:30px;
			line-height: 30px;
			cursor: pointer;
			font-size: 12px;
			position:relative;
			padding-left: 12px;
			
		}
		
		
		li.astive{
			background: #999395;
		}
		li span:hover{
			color:#c81623;
		}
		.none{
              display:none;
		}
		#sub{
	
			width:600px;
			position:absolute;
			border:1px solid #f7f7f7;
			background:#f7f7f7;
			box-shadow:2px 0 5px rgba(0,0,0,0.3) ;
			left:200px;
			top:0;
			padding:10px;
		}
		.sub_content a{
			font-size: 12px;
			color:#666;
			text-decoration: none;
			
		}
		.sub_content dd a{
			border-left: 1px solid #e0e0e0;
			padding:0 10px;
			margin:4px 0;
			
		}
		.sub_content dl{
			overflow: hidden;
		}
		.sub_content dt{
			float:left;
			width:70px;
			font-weight: bold;
			clear:left;
			position:relative;
		}
		.sub_content dd{
			float:left;
			margin-left:5px;
			border-top: 1px solid #eee;
			margin-bottom: 5px;
		}
		.sub_content dt i{
			width:4px;
			height:14px;
	        font-size: 14px;
			position:absolute;
			right:5px;
			top:5px;
			
		}
		</style>//css代码
		js代码
		$(document).ready (function() {
var sub = $('#sub')
var activeRow
var activeMenu
$('#test')
.on('mouseenter',function(e) {
sub.removeClass('none')
})
.on('mouseleave',function(e) {
sub.addClass('none')
if(activeRow){
activeRow.removeClass('active')
activeRow = null
}
if(activeMenu){
activeMenu.addClass('none')
activeMenu = null
}
})
.on('mouseenter','li',function(e){
if(!activeRow){
activeRow = $(e.target).addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')
return
}
activeRow.removeClass('active')
activeMenu.addClass('none')
activeRow = $(e.target)
activeRow.addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')
})
})