Question

我有一张桌子，每个tr约有15 tr和11 td。我可以在盘旋tr时只通过.css（）方法设置td数字8（从0开始）。

问题：使用我的代码，它选择整个列，所有td都使用.media类，而不仅仅是hovered tr中的那个。

编辑：

以下是jsfiddle链接：http://jsfiddle.net/XgH43/3/

已更改：
这是我试过的：

注意：MEDIA，LIGADO和HIDE是我所做的课程的参考。注意2：我无法访问css或php，我正在与它们分开工作，之后他们可以实现类和他们想要的任何内容。

//MOUSE OVER:

    //MEDIA W/O .LIGADO:

    //W/O .HIDE:
    $("tr.destacar:not(.hide, .ligado)").mouseover(function (){
    $("td.media", $(this)).css(
    {
        'background'        : 'purple',
        'box-shadow'        : 'inset 0 10px 20px 5px #FFFFFF,0 1px 5px #929292',
        '-moz-box-shadow'   : 'inset 0 10px 20px 5px #FFFFFF,0 1px 5px #929292',
        '-webkit-box-shadow': 'inset 0 10px 20px #FFFFFF,0 1px 5px #929292',
        'text-decoration'   : 'underline'
    }
    );
    }
);

    //WITH HIDE:  
    $("tr.destacar.hide:not(.ligado)").mouseover(function (){
    $("td.media", $(this)).css(
    {
        'background'        : 'green',
        'box-shadow'        : 'inset 0 10px 20px 5px #FFFFFF,0 1px 5px #929292',
        '-moz-box-shadow'   : 'inset 0 10px 20px 5px #FFFFFF,0 1px 5px #929292',
        '-webkit-box-shadow': 'inset 0 10px 20px #FFFFFF,0 1px 5px #929292',
        'text-decoration'   : 'underline'
    }
    );
    }
);

//MOUSE OUT:

    //MEDIA W/O .LIGADO:

    //MEDIA W/O.HIDE:
    $(".destacar").not(".hide, .ligado").mouseout(function (){
    $("td.media", $(this)).css(
    {
        'background'        : 'red',
        'box-shadow'        : 'none',
        '-moz-box-shadow'   : 'none',
        '-webkit-box-shadow': 'none',
        'text-decoration'   : 'none'
    }
    );
    }
    );

    //MEDIA WITH .HIDE:
$(".destacar.hide").not(".ligado").mouseout(function (){    
    $("td.media", $(this)).css(
    {
        'background'        : 'yellow',
        'box-shadow'        : 'none',
        '-moz-box-shadow'   : 'none',
        '-webkit-box-shadow': 'none',
        'text-decoration'   : 'none'
    }
    ); 
}
);

// ON CLICK:
// 
    //MEDIA WITH LIGADO:

    $('.destacar.ligado').not(".hide").click(function () {

    //MEDIA W/O HIDE:
    $("td.media", $(this)).css(
    {
        'background'        :'red',
        'box-shadow'        :'none',
        'font-weight'       :'normal',
        'font-size'         :'default',
        '-moz-box-shadow'   :'none',
        'box-shadow'        :'none',
        '-webkit-box-shadow':'none',
        '-o-box-shadow'     :'none'
    }
    );
}
);

    //MEDIA WITH .HIDE:
    $('.destacar.hide.ligado').click(function () {
    $("td.media", $(this)).css(
    {
        'background'        :'yellow',
        'box-shadow'        :'none',
        'font-weight'       :'normal',
        'font-size'         :'default',
        '-moz-box-shadow'   :'none',
        'box-shadow'        :'none',
        '-webkit-box-shadow':'none',
        '-o-box-shadow'     :'none'
    }
    );
}
);

    //MEDIA W/O .LIGADO

    //MEDIA W/O .HIDE:
    $('.destacar').not(".hide, .ligado").click(function () {
        $(this).addClass(".ligado");
    $("td.media", $(this)).css(
    {
        'background'        :'purple',
        'box-shadow'        :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
        'font-weight'       :'bolder',
        'font-size'         :'12pt',
        '-moz-box-shadow'   :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
        'box-shadow'        :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
        '-webkit-box-shadow':'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
        '-o-box-shadow'     :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775'
    }
    );
    }
    );

    //MEDIA WITH .HIDE:
    $('.destacar.hide').not(".ligado").click(function () {
        $(this).addClass(".ligado");
    $("td.media", $(this)).css(
    {
        'background'        :'green',
        'box-shadow'        :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
        'font-weight'       :'bolder',
        'font-size'         :'12pt',
        '-moz-box-shadow'   :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
        'box-shadow'        :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
        '-webkit-box-shadow':'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
        '-o-box-shadow'     :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775'
    }
    );
    }
    );

这不是完整的代码，但它是重要的部分。我已经改变了它，现在它几乎可以工作，但仍然没有完全正常工作。 PS：这是必须没有.hide和.ligado类而不是td的tr。

Jsfiddle完整版代码： http://jsfiddle.net/XgH43/3/

Answer 1

尝试从样式中更改选择器

$(this + ":not(.hide, .ligado) td.media")

到

$(":not(.hide, .ligado) td.media", this)

这会将选择限制为具有鼠标悬停的元素。

Answer 2

$('td.media', $(this)).not('.hide, .ligado').css({...});

更新（根据您的评论，我意识到应该是这样）

$("tr.destacar").not('.hide, .ligado').mouseover(function(){
    $('td.media', $(this)).css({...});
});

Answer 3

我已经准确地使用了之前的两个答案 - 如果你知道我怎么能奖励作者请告诉我 - 并想出了解决方案，但不幸的是我不得不编辑css文件，这使我的目标无法实现这样做，我可以乱七八糟地找到另一种解决方案，但实际上，编辑css使它更清洁。这是它的jsfiddle链接（顺便说一句，颜色只是用于测试，我不会让它如此丑陋）。再次感谢Niclas和Sheikh。

使用jquery进行表样式化 - Jquery事件样式没有相应的响应

3 个答案: