Grow your CSS skills. Land your dream job.

Change table Row background-color On click a link presented in td

  • # December 8, 2012 at 10:44 am

    Requirement :
    I have a link presented in a td of a table’s tr.
    On click of this link, The complete row’s background color should change to blue.
    I want to do it with CSS alone(Just checking whether can do it in CSS alone or not)

    I am able to change the link background color but not for tr.
    sample Code is :

    css used is :

    tr.test td a:hover
    {
    color: #FFFF00;
    background:#0000FF;
    }

    HTML Table is :

    Data

    Age

    Name

    Click Me 1

    A

    23

    AAA

    Click Me 2

    Only 3rd TD getting effected but not entire TR. Please suggest on how to do it in CSS.

    # December 8, 2012 at 12:30 pm

    There’s no selector we can use to select the parent of a hovered element.

    This is, however, possible in other ways. Here are your options:

    – Use a little JavaScript
    – wrap the whole row in an anchor
    – put the :hover rule on the table row

    # December 9, 2012 at 9:14 am

    Thank you **tbwiii**. I am able to do it with javascript.
    Wrapping the whole row in an anchor is an interesting option. Will try that too.
    By mistake i kept hover in sample code. I want to do this onclick of the anchor in td.

    # December 9, 2012 at 5:13 pm

    Yeah then JavaScript is definitely the way to go, let us know if you need a hand with that.

    # December 10, 2012 at 4:24 am

    Thank you I had completed it.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".