相对于表的mouseout和mouseover的更正

Correction of the mouseout and mouse over in relation to table

本文关键字：mouseover mouseout 相对于      更新时间：2023-09-26

目标：
如果鼠标的图标在表的行中，则该行应该具有不同的背景颜色。当图标位于行外时，该行的背景应恢复为默认设置。

问题：
我无法使jQuery中的源代码正常工作。

我只想使用jQuery。

Fiddle

    <TABLE id="dataTable" width="350px" border="1">
        <TR class="row_overr">
            <TD>4</TD>
            <TD>1</TD>
            <TD>22</TD>
            <TD></TD>            
        </TR>
         <TR class="row_overr">
            <TD>4</TD>
            <TD>1</TD>
            <TD>22</TD>
            <TD></TD>            
        </TR>       
         <TR>
            <TD>4</TD>
            <TD>1</TD>
            <TD>22</TD>
            <TD></TD>            
        </TR>       
    </TABLE>


$(document).ready(function(){
    /*
    $('tr').live('mouseover', function() {
  $(this).addClass('row_over');
});

        $('tr').live('mouseout', function() {
  $(this).addClass('row_overr');
});
    */


    $('tr').mouseover(function()
    {
        $(this).addClass('row_over');
    });

        $('tr').mouseout(function()
    {
        $(this).addClass('row_overr');
    });

});



.row_over
{
    background: #AA1133;
}
.row_overr
{
    background: #FFFFFF;
}

您根本不需要jQuery/javascript。

普通的旧CSS适用于所有现代浏览器：

#dataTable tr:hover {
    background: #AA1133;
}

看看小提琴。

您可以使用jquery hover

$("table tr").hover(
function(){ //handles the mouseenter
    $(this).removeClass('row_overr');
    $(this).addClass('row_over');
},
 function(){ //handles the mouseleave                  
     $(this).addClass('row_overr');
     $(this).removeClass('row_over');
});

FIDDLE

更新

正如Brock Adams所提到的，它可以通过利用jquery链接来简化

$("table tr").hover(function(){
$(this).removeClass('row_overr').addClass('row_over');
},
function(){           
$(this).addClass('row_overr').removeClass('row_over');
});

FIDDLE

试试这个

$(document).ready(function(){
    $('tr').mouseover(function()
    {
        $(this).addClass('row_over');
    });

    $('tr').mouseout(function()
    {
        $(this).addClass('row_overr');
    });

});



.row_over
{
    background: #AA1133;
}
.row_overr
{
    background: #FFFFFF !important;
}
相关文章：