css - change td background color AND text color at same time

Dev Shed Forums Sponsor:

October 16th, 2003, 10:20 AM

joecastro

Junior Member

Join Date: Oct 2003

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

css - change td background color AND text color at same time

Okay this should be an easy one for anybody out there with half a brain ! (not me!)

okay wha t I want to happen is this - I mouseover the td of a table and the td background color cahnges (this I can do) BUT what I want to also happen is for the text in the table cell to allso change - this should be simple it is just a matter of knowing how to change two style sheet elements right??

Any help would be greatly appreciated - thanks..

October 16th, 2003, 10:29 AM

jerom

Contributing User

Join Date: May 2003

Posts: 1,014

Time spent in forums: 1 Day 17 h 34 m 25 sec
Reputation Power: 9

Try something like this:

Code:

<style type="text/css">
td.mytdclass {
  color: black;
  background-color: white;
}
td.mytdclass:hover {
  color: yellow;
  background-color: #c0c0c0;
}
</style>

Or (some browsers don't support :hover pseudo-classes.. IE5.5 for example):

Code:

<script type="text/javascript">
function tdmouseover(el) {
	el.style.color = "yellow"
	el.style.backgroundColor = "#c0c0c0"
}
function tdmouseout(el) {
	el.style.color = "black"
	el.style.backgroundColor = "white"
}
</script>
<td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)">blah</td>

Hope it helps,
Jeroen

Last edited by jerom : October 16th, 2003 at 10:46 AM.

October 16th, 2003, 02:00 PM

mrrichardfeder

Contributing User

Join Date: Nov 2001

Posts: 765

Time spent in forums: 3 m 45 sec
Reputation Power: 7

You can use link-hover on non CSS2-compliant browsers, although it takes a little planning.
Lots of people adapting these techniques for pure-CSS menus these days.

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

table           {
                 border-collapse: collapse;
                 margin: 20px 100px;
                }

td              {
                 width: 100px;
                 height: 93px;
                 font: 8pt verdana;
                 text-align: center;
                 margin: 0px;
                 padding: 1px;
                }

td.normal       {
                 background: #eef;
                }

td.outlined     {
                 border: 1px black solid;
                 background: #efe;
                }

a.block:link    {
                 display: block;
                 width: 100%;
                 height: 100%;
                 color: black;
                 text-decoration: none;
                }

a.block:visited {
                 display: block;
                 width: 100%;
                 height: 100%;
                 color: black;
                 text-decoration: none;
                }

a.block:hover   {
                 color: white;
                 background: black;
                }

</style>
</head>
<body>
<table>
<tr>
<td class="normal"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
<td class="normal"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
<td class="outlined"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
</tr><tr>
<td class="normal"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
<td class="outlined"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
<td class="normal"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
</tr><tr>
<td class="outlined"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
<td class="normal"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
<td class="normal"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
</tr><tr>
<td class="normal"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
<td class="outlined"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
<td class="normal"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
</tr><tr>
<td class="normal"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
<td class="normal"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
<td class="outlined"><a class="block" href="#null" onclick="return false">this should be simple it is just a matter of knowing how to change two style sheet elements right??</a></td>
</tr>
</table>
</body>
</html>

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: