Question

我有一张桌子，当我将鼠标悬停在表格内的单元格上时，当前单元格和第一列突出显示：

$('.price_cell').hover(function(){

    $(this).css('background-color','#cce6ff');
    $('td:first', $(this).parents('tr')).css({'background-color':'#0096E1','color':'#ffffff'});

},
function(){

    $(this).css('background-color','#ffffff');
    $('td:first', $(this).parents('tr')).css({'background-color':'#ffffff','color':'#002436'});
});

这很好用。然而，当我想让第一个柱状细胞在用户盘旋在线上的细胞上时改变颜色时，我不希望第一个柱状细胞在悬停时改变颜色。

Answer 1

您也可以使用纯CSS执行此操作。

table tr:hover                 { background-color: black; color:white;}
table tr:hover td:first-child  { background-color:white; color:black }

示例：http://jsfiddle.net/wBu5M/

Answer 2

检查悬停的单元格的索引，如果悬停的单元格不是行中的第一个，则更改CSS：

$('.price_cell').hover(
    function() {
        if ($(this).index() != 0) {
            ...
        }
    },
    function() {
        if ($(this).index() != 0) {
            ...
        }
    }
);

或者，可能更有效率，因为它会创建一对回调，而不是在每个单元格上注册一对：

$('table')
    .delegate('.price_cell', 'mouseenter', function() {
        if ($(this).index() != 0) {
            // hover-in style here
        }
    })
    .delegate('.price_cell', 'mouseleave', function() {
        if ($(this).index() != 0) {
            // hover-out style here
        }
    });

注意：我在这里没有使用:not(:first-child)，因为这需要更多的工作来解析选择器而不是简单的$(this).index()调用。

Answer 3

将您的选择器更改为：

$('.price_cell:not(:first-child)').hover(function(){

使用Phrogz的代表建议：

$('#mytable').delegate('.price_cell:not(:first-child)', 'mouseenter', function() {
    $(this).css('background-color','#cce6ff');
    $('td:first', $(this).parents('tr')).css({'background-color':'#0096E1','color':'#ffffff'});

}).delegate('.price_cell:not(:first-child)', 'mouseleave', function() {
    $(this).css('background-color','#ffffff');
    $('td:first', $(this).parents('tr')).css({'background-color':'#ffffff','color':'#002436'});
});

使用JQuery突出显示连续的第一列

3 个答案: