CODEWITHSUNDEEP
htmlcsscss-tables
user1665700
user1665700

Reputation: 512

How to change Row Color when Hovering over a Cell in that Row

Is there any way in CSS the change the background-color of a Row in a table made of 3 columns, when I hover over a cell in this row?

table tr:hover
{
    background-color:blue;
}

Doesn't seem to work.

UPDATE

I'm using Mozilla Firefox, it only works when I hover over a <th> not a <td>

Upvotes: 1

Views: 4505

Answers (4)

user1665700
user1665700

Reputation: 512

This is what solved it.

table tr:hover > td
{
    background-color:aqua;
}

Upvotes: 1

sǝɯɐſ
sǝɯɐſ

Reputation: 2528

This works fine for me:

http://jsfiddle.net/EJ63m/

<html>
<head>
<style>
table tr:hover
{
    background-color:blue;
}
</style>
</head>
<body>
<table>
    <tr><td>Foo</td><td>Bar</td><td>FooBar</td></tr>
    <tr><td>Bar</td><td>Foo</td><td>FooBar</td></tr>
</table>
</body>
</html>

What browser are you using?

Upvotes: 1

sjramsay
sjramsay

Reputation: 555

tr:hover{ background-color:red; }

Upvotes: 1

Joel Etherton
Joel Etherton

Reputation: 37533

Use this syntax:

tr.hover > td:hover
{
    background-color: blue;
}

<tr class="hover">
    <td>;lajsdfl;jasdl;jasd;f</td>
    <td>;lajsdfl;jasdl;jasd;f</td>
</tr>

The fiddle: http://jsfiddle.net/DQ9Vz/

Upvotes: 1

Related Questions