1

我有一张桌子，每个 tr 大约有 15 个 tr 和 11 个 td。我可以将 tr 悬停以仅通过 .css() 方法设置 td 编号 8（从 0 开始）。

问题：使用我的代码，它选择了整个列，所有带有 .media 类的 td，而不仅仅是悬停的 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.: tr 不能有 .hide 和 .ligado 类，而不是 td。

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

4

3 回答 3

2

尝试从样式更改您的选择器

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

到

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

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

于 2012-05-08T14:27:51.753 回答
1 
$('td.media', $(this)).not('.hide, .ligado').css({...});

更新（从您的评论中我意识到应该是这样）

$("tr.destacar").not('.hide, .ligado').mouseover(function(){
    $('td.media', $(this)).css({...});
});
于 2012-05-08T14:32:09.377 回答
0

I've acctually used the tow previous answers - if you know how could I reward both the authors please tell me - and came up with the solution , but unfortunetly I had to edit the css file , which fails my goal to not do so, I could mess arround and find another solution , but really , to edit the css makes it much cleaner. Here it is the jsfiddle link of it (by the way , the colors are just for testing , I wouldn't make it so ugly). Thanks again , Niclas and Sheikh.

于 2012-05-09T19:31:13.560 回答