Question

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

问题：
我不能让jQuery中的sourcode正常工作。

我只想使用jQuery。

    <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;
}

Answer 1

您可以使用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

Answer 2

你根本不需要jQuery / javascript。

普通老CSS works in all modern browsers：

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

See the fiddle.

Answer 3

试试这个

$(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;
}

鼠标输出和鼠标相对于表的更正

3 个答案: