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%">

      <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>




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