0

I want to give good background effect to rows using this css

tr:hover td{background-color:#ddd; }

imagine a table inside a table, naturally all td's inside, also effected by this css. How can I prevent?

<table
    <tr
        <td -->color change is good
    <tr
        <td
            <table
                <tr
                    <td --> color change is bad

I tried using

form>table>tr:hover td still same
form>table>tr:hover>td not working at all

thanks for help

nerkn
  • 1,848
  • 1
  • 20
  • 34

2 Answers2

1

Use this to style only your outer tds on hover.

form > table > tbody > tr:hover > td {
    background-color: #ddd;
}

Notice the tbody selector. See this answer for why it's needed.

Community
  • 1
  • 1
BoltClock
  • 665,005
  • 155
  • 1,345
  • 1,328
0

Use a second selector:

tr:hover table td { background-color: black; } /*change to default*/
Zirak
  • 37,288
  • 12
  • 78
  • 90