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

秒速五厘米 2022-08-06 05:17 144阅读 0赞

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

<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 事件。

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