Web Analytics Made Easy -
StatCounter CSS Table Row Mouseover Effect - CodingForum

Announcement

Collapse
No announcement yet.

CSS Table Row Mouseover Effect

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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

    Comment


    • #3
      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
      Master Newbie http://dwightstegall.com/

      Comment

      Working...
      X