How to add the hover effect to an element that is nested to an element with hover?

Question

I have a table that consists of 7 columns and a variable number of rows. When I hover over a table row, the play button appears in the column #2. This is implemented with help of less:

.table-hover > tbody > tr {
    border-left:4px;
    border-left-color:transparent;
    border-left-style:solid;
    &:hover {;
    border-left-color:@active-element-color;
    >thtdbackground-color:#f5f5f5
}

>td:nth-child(2) {
    background-image:url(images/play_icon.png);
    background-position:center;
    background-repeat:no-repeat
}
}

and it looks as follows:

You can see the hovered row has the play button. What I am trying to do - is to implement the additional (extra) hover for the button.

If it was a link element, I could add just pseudo :hover class to the link and get what I want. But this is not the link, when I click the play button - data must be send to a server.

I found the solution here on JSFIDDLE but the problem is that in my case all images added via CSS and in the jffiddle example, images added via the input element in html code. Additional problem is that there are 2 images and I want to use a single image

So the question is - what is the right way to implement extra hover?

Answer 1

It can be accomplished two ways, using purely just CSS or with the aid of javascript ( jQuery ).

Using CSS3 :nth-child() Selector:

#yourTable td { background: #ccc; height: 2em; width: 8em; }

#yourTable tr:hover td:nth-child(2) { background: red; }

fiddle demo here: http://jsfiddle.net/7F3ge/

or

Using jQuery to add hover class to a specific DOM element:

$('document').ready(function(){

    $('#yourTable tr').hover(function() {
        $(this).children('td:eq(1)').toggleClass('hover');
    });

});

fiddle demo here: http://jsfiddle.net/u527u/3/