鼠标浮动到表格的某行 背景颜色变化[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 事件。
这里一定要配对使用,不然肯定会出现问题