CODEWITHSUNDEEP
css
santa
santa

Reputation: 12512

Adding hover color to specific row

If I am targeting a specific row, say the first one in a table, and want to change font color, I can do this

.mytable tr:first th {
  color: red
}

But how do I add a hover property to the same row? This won't work, would it?

.mytable tr:first:hover th {
  color: green
}

Upvotes: 2

Views: 3172

Answers (4)

ADW
ADW

Reputation: 4080

How about this:

.hoverstate:hover { color: green; }

with HTML like this:

<table>
    <tr><td>1</td><td>2</td></tr>
    <tr class="hoverstate"><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
</table>

?

Upvotes: 1

Steve Mallory
Steve Mallory

Reputation: 4283

Can you put just the first row in a thead container?

.mytable thead:hover {
     color: green
}

<table class="mytable">
    <thead>
        <tr><th>hello</th></tr>
    </thead>
    <tr><td>goodby</td></tr>
</table>

Upvotes: 2

anothershrubery
anothershrubery

Reputation: 21003

Surely you use first-child and not just first? Then apply the hover to the first-child. You don't need to specify th as it will propogate through anyway.

Check this DEMO

.mytable tr:first-child { color: red; } 
.mytable tr:first-child:hover { color: green; } 
.mytable tr { color:blue; }

However if you are looking to specify any row, other than the first-child, you might have to look at some javascript, or maybe the use of nth-child but that would rule out < IE8 compatibility.

Upvotes: 1

tim
tim

Reputation: 10176

What about

.mytable tr:first th:hover {
  color: green
}

?

Upvotes: 1

Related Questions