Question

I have a table with about 15 tr’s and 11 td’s for each tr. I which a could on hovering the tr to make only the td number 8 (from 0) to be styled through the .css() method.

Problem: with my code it selects the whole column , all the td’s with the .media class , not only the one in the hovered tr.

EDIT :

Here is the jsfiddle link: http://jsfiddle.net/XgH43/3/

CHANGED :
Here is what I tried:

note: MEDIA, LIGADO and HIDE are reference to classes I made.
note 2 : I don’t have access to the css or the php, I’m working separated from them, later they can implement classes and whatever they feel like it.

//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'
    }
    );
    }
    );

It’s not the full code , but It’s the part that matters. I’ve changed it and now it almost works, but still not fully working.
PS.: It’s the tr that must not have the .hide and .ligado classes and not the td.

Jsfiddle full version code : http://jsfiddle.net/XgH43/3/

Answer 1

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.