鼠标浮动到表格的某行 背景颜色变化[mouseover mouseout 以及mouseenter mouseleave]

之前一直觉得很难,今天用到了 好像超级简单

<table id="tableData">
  <tr class="flag">
     <td>标题一 </td>
      <td>标题二</td>
 </tr>
    <tr >
     <td>第一行一列</td>
      <td>第二行第二列</td>
 </tr>
  <tr class="flag">
     <td>第二行第一列</td>
      <td>第二行第二列</td>
 </tr>
</table>

  $(document).on('mouseenter','#tableData tr',function(){ 
    	if($(this).attr('class')!='flag'){ 
    			$(this).css('background-color','red');
    	}

    });

     $(document).on('mouseleave','#tableData tr',function(){ 
    	if($(this).attr('class')!='flag'){ 
    			$(this).css('background-color','transparent');
    	}

    });

2015 03 11 今日在看jquery api的时候发现一个更简洁的代码，原理是一样的 内容可能不一样

 
 

  
  

   
   $( "p" ).bind( "mouseenter mouseleave", function( event ) {
  
  
 
 
 
 

  
  

   
     $( this ).toggleClass( "over" );
  
  
 
 
 
 

  
  

   
   });
  
  
 
 

绑定事件里面的if判断只是去掉标题tr的特殊情况，请自行引用jquery ~ 希望对新手朋友有帮助~

2.2日 写了一个超级简单的表格颜色变换插件,但是对mouseover 和mouseleave的混用 让我吃了苦头,找了半天的bug ,于是记录下了面

鼠标移开不要用out 这样会出现bug，找到了mouseout 和mouseleave的事件区别
1，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
2，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

鼠标移入的时候同样有两个不同的，mouseover和mouseenter ,他们的区别

1，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
2，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

这里一定要配对使用,不然肯定会出现问题