Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Table Row Mouseover Effect

    I am trying to create a menu bar using CSS. I would like the text to change colour when the user places their mouse over the whole table row not just the actual letters. This is what I have so far..

    <STYLE>
    a.menu {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color:#FFFFFF; text-decoration: none; }
    a.menu:hover {color: #000000; }
    .cell_over { background-color: #FFCCCC }
    .cell_out { background-color: #CC3333 }
    </STYLE>
    </head>

    <body>
    <table width="195" border="1" cellpadding="4" cellspacing="0" bordercolor="#000000">
    <tr onclick="location.href='home.htm';">
    <td width="190" height="24" align="right" valign="middle" onmouseover="this.className='cell_over';" onmouseout="this.className='cell_out';" bgcolor="#CC3333" ><strong><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><a href="home.htm" class="menu">home</a></font></strong></td>
    </tr>
    </table>
    </body>

    Any help would be wonderful. Thanks!

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    block and width

    Style the a elements with "display: block" and an explicit width (IE5.x/Win requirement).
    Also, look into the use of lists for constructing menu bars as opposed to the - non-recommendable - abuse of tables in the Listutorial.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Regular Coder oldcrazylegs's Avatar
    Join Date
    Feb 2004
    Location
    East Moline Illinois USA
    Posts
    414
    Thanks
    4
    Thanked 5 Times in 4 Posts

    Try this

    http://www.geocities.com/dwightl.geo/ Click on CSS Buttons in the dropdown menu. you can use the basic stylesheet and make a few alterations to get the effect you want


  •  

    Posting Permissions

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