1

各 tr に対して約 15 個の tr と 11 個の td を含むテーブルがあります。tr をホバリングして、td 番号 8 (0 から) のみを .css() メソッドでスタイル設定することができます。

問題：私のコードでは、ホバーされたtrのものだけでなく、列全体、.mediaクラスのすべてのtdが選択されます。

編集 ：

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 .: td ではなく、.hide および .ligado クラスを持ってはならないのは tr です。

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

私は実際に以前の2つの回答を使用しました-両方の著者に報酬を与える方法を知っている場合は教えてください-解決策を思いつきましたが、残念ながらcssファイルを編集する必要がありました。私はぐちゃぐちゃにして別の解決策を見つけることができましたが、実際には、CSSを編集するとはるかにきれいになります。ここにjsfiddleリンクがあります（ちなみに、色はテスト用です。それほど醜くはしません）。ありがとう、ニクラスとシェイク。

于 2012-05-09T19:31:13.560 に答える