SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict isuru's Avatar
    Join Date
    Nov 2000
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to do this in CSS

    On the ninemsn page - http://ninemsn.com.au there is a navigation bar on the left. This navigation bar is a table containing links with each cell containing one link. When you pass your mouse over the cell, the background of the cell changes from dark blue to light blue. They have done this using javascript (and the menu involves another menu popping out)

    I am wondering whether it is possible to change the background color of a cell when the mouse moves over it (I don't want the pop up menu bit) using just CSS and no javascript?

    I would appreciate any help with and greatly appreciate any working code, as I have tried numerous ways to do this using the background-color css property (only trial and error)

    Thanks

    Note: I hope the above site http://ninemsn.com.au shows up for you and doesn't redirect to your local MSN portal

  2. #2
    SitePoint Zealot 19nine78's Avatar
    Join Date
    Feb 2002
    Location
    Ayr, scotland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this works in mozilla RC2:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>

    <style type="text/css">
    <!--
    td:hover{
    background-color:#f00;
    }
    -->
    </style>
    </head>
    <body>
    <table border="1">
    <tr>
    <td>roll me over</td>
    <tr>
    </table>
    </body>
    </html>

    it doesn't work in IE6 or opera 6 though, not sure about macs.

    if you don't specifically require table cells to change colour, take a look at:

    Using CSS to create rollovers

    cheers

    alastair

  3. #3
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The technique I use to get rollovers in CSS is to turn links (<a> tags) in to block level elements and set the hover pseudo-selector on those. I use that technique on this site:

    www.bath.ac.uk/~cs1spw/nemesis/

    I learnt the technique from playing around with the samples on css/edge:

    http://www.meyerweb.com/eric/css/edge/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •