Changing background color of <td> onmouseover, without onmouseover attribute in html

Discussion in 'CSS' started by fatabbot, Jan 28, 2007.

0
  1. #1
    Hi,

    I'm trying to change the background color of a cell on a mouseover, with this in the <td> tag:

    <td class='menutd' onmouseover=\"this.className='menutd_mouseover'\" onmouseout=\"this.className='menutd'\">...</td>

    So 2 different CSS classes for this.
    I was wondering if it's possible to put this stuff completely in CSS, in a way that it works the same and the code looks like this:

    <td class='menutd'>...</td>
     
    fatabbot, Jan 28, 2007 IP
  2. jared

    jared Peon

    Messages:
    231
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    To my knowledge there is no way to do what you want to do in complete CSS without the mouseover javascript line.

    There are some hacks you can find that will allow you to do similar things using the css :hover markup but I don't think they work in IE 6 or old browsers.

    cheers
     
    jared, Jan 28, 2007 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Jared's right. There's just a whole pot load of things we could do with css if it weren't for IE. IE doesn't recognize the :hover pseudo class on anything but "a".

    Compare modern browsers, Firefox, Opera, Safari, Konqueror, etc., to IE with this document: 
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
  <head>
    <title></title>
    <meta name="generator"
          content=
          "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
    <meta http-equiv="content-type"
          content="text/html; charset=utf-8" />
    <meta name="editor"
          content="Emacs 21" />
    <meta name="author"
          content="Gary Turner" />
<style type="text/css">
  /*<![CDATA[*/
html, body {
    margin: 0;
    padding: 0;
    }

body {
    font: 100% verdana, helvetica, sans-serif;
    line-height: 1.4;
    color: black;
    background-color: #fefefe;
    }

p {
    font-size: 1em;
    }
   
h1, h2, h3 {
    font-family: georgia, serif;
    }

table {
    border-collapse: collapse;
    margin: 25px auto;
    }

td {
    border: 1px solid red;
    background-color: #faa;
    padding: 0 5px;
    }

td:hover {
    background-color: #afa;
    }   

/*]]>*/
</style>
  </head>

  <body>
    <table summary="">
      <tr>
        <td>
          <p>
            some odd thing or another
          </p>
        </td>
        <td>
          <p>
            some odd thing or another
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p>
            some odd thing or another
          </p>
        </td>
        <td>
          <p>
            some odd thing or another
          </p>
        </td>
      </tr>
    </table>
  </body>
</html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Jan 28, 2007 IP
  4. duilen

    duilen Active Member

    Messages:
    354
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    58
    #4
    duilen, Jan 29, 2007 IP