#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    2
    Rep Power
    0

    Cool 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..
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    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.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    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>
    

IMN logo majestic logo threadwatch logo seochat tools logo