jquery 列表hover效果 ，css :hover ，jquery 事件委托，jquery hover()方法

jquery 列表hover效果

<ul class="list">
	<li class="item"><span>1</span><span class="select">只改变我</span></li>
	<li class="item"><span>2</span><span class="select">只改变我</span></li>
	<li class="item"><span>3</span><span class="select">只改变我</span></li>
</ul>

css实现

.item:hover {
	color: red
}
//只改变某一个子元素
.item .select:hover {
	color: red;
}

jquery事件委托

$('.list').on("mouseenter mouseleave",".item",function(event){
	if (event.type === 'mouseenter') {
	  $(event.target).css('color','red')
	} else {
      $(event.target).css('color','black')
  }
})
//只改变某一个子元素
$('.list').on("mouseover mouseout", ".item",function(event){
  if (event.type === 'mouseover') {
	$(event.currentTarget).find('.select').css('color','red')
  } else {
	$(event.currentTarget).find('.select').css('color','black')
  }
})

jquery hover()方法

$('.item').hover(function(){
    $('.item').eq($(this).index()).css('color','red')
  },function(){
	$('.item').eq($(this).index()).css('color','black')
})
//只改变某一个子元素  
$('.item').hover(function(){
    $('.item').eq($(this).index()).find('.select').css('color','red')
  },function(){
	$('.item').eq($(this).index()).find('.select').css('color','black')
})