CODEWITHSUNDEEP
csshover
CaymanCarver
CaymanCarver

Reputation: 419

Trying to get a whole table row to highlight on mouseover

I have a gradient row in a table, and I would like to change the gradient of the entire row when the mouse is over any cell in that row. As far as I've been able to read, the CSS I'm using now should work, but nothing happens upon mouseover (but the original gradient looks perfect). Here is the CSS:

td {
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
  padding: 3px 15px;
  text-align: center;
}

.silvergrad {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF', endColorstr='#CCC');
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
  background: -moz-linear-gradient(top, #FFF, #CCC);
}

.silvergrad tr:hover td {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999', endColorstr='#CCC');
  background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#CCC));
  background: -moz-linear-gradient(top, #999, #CCC);
}

I have tried it with and without the td after the .silvergrad tr:hover. Here is the HTML for the row:

<tr class="silvergrad">
  <td>Some stuff</td>
  <td>Some stuff</td>
  <td>Some stuff</td>
</tr>

Can anyone see what I'm doing wrong? Thanks in advance.

Upvotes: 1

Views: 3393

Answers (5)

CaymanCarver
CaymanCarver

Reputation: 419

Now it works, although I could SWEAR this is one of the many variations I tried. All I did was to change:

.silvergrad tr:hover td {

to simply

.silvergrad:hover {

and now it works beautifully. Thanks to all of you who responded so quickly.

Upvotes: 0

tcgumus
tcgumus

Reputation: 328

Maybe its changing but you cant see.

please try this for gradient code. 

.silvergrad tr:hover>td{

 background-color: #999;
 background-image: -moz-linear-gradient(top, #999, #ccc);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#999), to(#ccc));
 background-image: -webkit-linear-gradient(top, #999, #ccc);
 background-image: -o-linear-gradient(top, #999, #ccc);
 background-image: linear-gradient(to bottom, #999, #ccc);
 background-repeat: repeat-x;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff999',endColorstr='#ffccc', GradientType=0);
}

please reply after testing :)

Upvotes: 0

j08691
j08691

Reputation: 207901

Change your one CSS rule from:

.silvergrad tr:hover td {

to 

.silvergrad:hover td {

jsFiddle example

There is no tr element that's a descendant of .silvergrad. silvergrad is the tr.

Upvotes: 4

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

Your CSS is looking for a tr that is inside an element with the .silvergrad class, not for one that has it. Try this:

tr.silvergrad:hover>td

Upvotes: 1

user1726343
user1726343

Reputation:

You are specifying the table row as a descendant of the element with the silvergrad class, whereas it is the element with the silvergrad class. Try using this:

tr.silvergrad:hover td {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999', endColorstr='#CCC');
  background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#CCC));
  background: -moz-linear-gradient(top, #999, #CCC);
}

Upvotes: 2

Related Questions