CSS Table rollover effect

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Table rollover effect

hunkydory

9:30 am on Aug 11, 2008 (gmt 0)

I am trying to make a CSS rollover effect on a table so as the visitor rolls over a colum the background colour changes.

I have it working however not fully as I like:

.Back_colour a:hover {
text-decoration: none;
background-color: #D9E7FF}

I want it so if the visitor rolls over any cell in row '1' the whole row changes background colour not just that cell. How can I do this?

Thanks!

BeeDeeDubbleU

11:28 am on Aug 11, 2008 (gmt 0)

Wouldn't you set the CSS on the tr as opposed to the table?

swa66

11:53 am on Aug 11, 2008 (gmt 0)

It will not work in older versions of IE without javascript or so.

Standards compliant browsers use a :hover on the tr.

hunkydory

12:13 pm on Aug 11, 2008 (gmt 0)

Thanks, but still no joy. The background only changes on one cell not the row:

</table>

swa66

2:45 pm on Aug 11, 2008 (gmt 0)

What's the CSS to go along with that table ?

.Back_colour:hover {background-color:red;}

should do the trick in all but old IE versions.

[edited by: swa66 at 2:50 pm (utc) on Aug. 11, 2008]

Xapti

2:49 pm on Aug 11, 2008 (gmt 0)

You don't need to assign a class to the TR unless you want a specific TRs style different than others. Even as you have it now, it should work. What browser are you testing it with?
Just writing tr:hover{background-color: #d9e7ff} is all you need though. For IE6 and lower (pretty much the only browser that won't support this) you can just use a conditional comment with javascript inside.

hunkydory

3:02 pm on Aug 11, 2008 (gmt 0)

I'm using ie7 - cant I post the url of it not working here?

swa66

3:33 pm on Aug 11, 2008 (gmt 0)

Try this:


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Untitled Document</title>
    <style type="text/css">
      .goinghigh tr:hover {
        background-color:red; 
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <h2>Ipso</h2>
      <p>Ipso lorem</p>
      <table class="goinghigh">
        <tbody>
          <tr>
            <td>11</td>
            <td>12</td>
          </tr>
          <tr>
            <td>21</td>
            <td>22</td>
          </tr>
        </tbody>
      </table>
      <p>Ipso lorem</p>
    </div>
  </body>
</html>

works fine in Firefox, and I'm sure it'll work in quite a few others as wel, except for IE6 and older.

hunkydory

4:01 pm on Aug 11, 2008 (gmt 0)

Many Thanks!

csuguy

12:54 am on Aug 12, 2008 (gmt 0)

if you want to have it work in all browsers - cover the table or div set in an anchor. For example:


<a class="effector" href="javascript:void()">
  <table class="effectee">
   ...
  </table>
</a>

Then - in your style section - put the following css:


.effector:hover .effectee
{
  background-color: green;
}

Very simple and works on all browsers!

csuguy

1:03 am on Aug 12, 2008 (gmt 0)

Oh - it looks like I slightly misread what you wrote. I thought you wanted to change the table background - not a specific column. No problem though! The HTML code just needs to be slightly modified while the css stays the same!


<table>
  <tr>
   ...
   <td><a href="javascript:void()" class="effector">
      <div class="effectee">...</div>
     </a>
   </td>
   ...
  </tr>
</table>

The CSS would look like this:


a.effector:hover .effectee
{
  background-color: green; /*or w/e color you want*/
}.effectee
{
  position:absolute;
  width:100%;
  height:100%;
}td
{
  position:relative;
}

That should work in all browsers!