Jump to content


Photo

Table Hovers, Background colours


  • Please log in to reply
2 replies to this topic

#1 xyn

xyn
  • Members
  • PipPipPip
  • Advanced Member
  • 779 posts
  • LocationNorthampton

Posted 30 September 2006 - 01:18 PM

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?
<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>


#2 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 30 September 2006 - 03:42 PM

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:

<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>

You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#3 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 02 October 2006 - 09:22 AM

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.
follow me on twitter @PHPsycho




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users