Jump to content

Archived

This topic is now archived and is closed to further replies.

xyn

Table Hovers, Background colours

Recommended Posts

Hey guys.
A while ago i done something in CSS so when the MOUSE hovers
over a table, the background colour changes, but i've forgotten
So i tried again and it kind of worked

then when the mosue hovers the link. the actual "TEXT" changes :/
So i tried changing the link to the whole table ROW and that dont work either :/

any ideas?
[sub]<style>
.nav, tr td a:link {font-family: Arial, verdana, Tahoma; background:url('http:///default/link.PNG');}
.nav, tr td a:visited {font-family: Arial, verdana, Tahoma; background:url('http:///default/link.PNG');}
.nav, tr td a:hover {font-family: Arial, verdana, Tahoma; background:url('http:///hover.PNG');}
.nav, tr td a:active {font-family: Arial, verdana, Tahoma; background:url('http:///link.PNG');}
</style>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="156" height="19">
  <tr>
    <td width="100%" class=nav><p align="center" ><a href="#t">test</a></td>
  </tr>[/sub]

Share this post


Link to post
Share on other sites
right, the :hover pseudo class only works cross-browser on anchor tags. if you're actually wanting table, row or even cell background-color to change, you'll need to do that via javascript. however, you can do this by dynamically changing the class:

[code]
<style type="text/css">
tr.normal {
background-color: #ffffff;
}

tr.hover {
background-color: #FCFDE3;
}
</style>
< script type="text/javascript">
function hoverMe(ele) {
  if (ele.className == 'normal') {
ele.className = 'hover';
} else {
ele.className = 'normal';
}
}
</ script>

<table>
<tr class="normal" onmouseover="hoverMe(this);" onmouseout="hoverMe(this);">
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr class="normal" onmouseover="hoverMe(this);" onmouseout="hoverMe(this);">
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr class="normal" onmouseover="hoverMe(this);" onmouseout="hoverMe(this);">
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr class="normal" onmouseover="hoverMe(this);" onmouseout="hoverMe(this);">
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
[/code]

Share this post


Link to post
Share on other sites
I believe there is a plugin for IE that allows you use :hover on any element in css - but it is a plugin and not many people will have it so stick to obsids suggestion - making sure that the users don't suffer any if js is switched off.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.