7 Replies Latest reply on Apr 19, 2010 7:10 AM by Ilya Shaikovsky

    How to change font color on rich:tab when user mouse is hovering over menu tab?

    Max McByte Newbie

      Hello RichFace'ers,

       

      I am new to Richfaces and I am trying to achieve a roll-over effect on a menu.

       

      I want to highlight the menu tab that a users mouse is hovering over by changing the font to a different color.

       

      I am using <rich:tabPanel> and <rich:tab> for my menus and they are working fine except for this highlight issue.

       

      My current non-RichFaces app does this just fine.

       

      I've been at this for some time now and I am really stuck.

       

      Listed below is the non-Richfaces menu that I want to duplicate in RichFaces.

       

      I am very appreciative of any ideas.

       

      Thank You!

       

      * ---------------------------------------------------------------------------------------------------- */
      My CSS

       

      #navigation_container    {position:absolute; top:155px; width:100%; margin-left:auto; margin-right:auto; }

       

      .navigation        {color:#000000; text-decoration:none; }
      a.navigation:link     {color:#999999; text-decoration:none; }
      a.navigation:visited     {color:#999999; text-decoration:none; }
      a.navigation:hover     {color:#FFCC00; text-decoration:none; }
      a.navigation:active    {font-size:14px; font-weight:700; }

       

      /* navigation_text */
      .navigation_text_1    {font-size:14px; font-weight:700; letter-spacing:1px; }

       

      My Nav Menu

       

      <table width="100%">
      <tr>


      <td bgcolor="#FEF465"><div align="center"><a href="index.html" title="Home" class="navigation"><font class="navigation_text_1">Home</font></a></div></td>


      <td bgcolor="#FEF465"><div align="center"><a  href="page1.html" title="Page1" class="navigation"><font  class="navigation_text_1">Page1</font></a></div></td>

       

      <td bgcolor="#FEF465"><div align="center"><a   href="page2.html" title="Page2" class="navigation"><font   class="navigation_text_1">Page2</font></a></div></td>

       

      </tr>
      </table>

       

      /* ---------------------------------------------------------------------------------------------------- */