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

[maxmcbyte]

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>

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

[nimo22]

hello,

with css you can do that:

.rich-tab-inactive:hover {

    color: blue;

    }

[maxmcbyte]

Hello Nimo;

Thanks for that info! It is what I needed!

NOTE; there is *** no mention *** of this in the RichFaces Developer Guide that I can find.

If you search for "hover" you get a few hits but nothing with rich-tab.

So gleaning from your example for test a purpose I tried;

.rich-tab-inactive:visited  {
     color:RED;
}

But that did not work.

The hover is working and I am happy.

Thanks Again!!!

[maxmcbyte]

Turns out that I got a little ahead of myself because the following

.rich-tab-inactive:hover {

    color: blue;

    }

did *** not work *** with FireFox 3.6, nor IE 6.

I was able to get it working with FireFox 3.6 using the following;

/* FireFox fix to allow hover effects with FireFox*/
td.rich-tab-inactive:hover, tr.rich-tab-inactive:hover {
    color:#FFCC00;
    text-decoration: none;
    font-size:18px;
}

But I have have yet to figure out how to do it with IE6 without resorting to JavaScript.

Any ideas?

Thanks!

[maxmcbyte]

Add IE8 to the list as well.

[ilya_shaikovsky]

you could use the class that we applying on selection

.rich-tbpnl-tb-sel {
background-color: red;
background-image: none;
}

[maxmcbyte]

Hello Ilya;

With your suggestion I changed it to

.rich-tbpnl-tb-sel {
    color: #FFCC00;
    text-decoration: none;
    font-size: 14px;
}

And got exactly what is needed!

This is the second time I have been provided info that I should be able to find myself.

I looked in the developers guide, the on-line-demo and a few other places and I cannot find any mention of ".rich-tbpnl-tb-sel".

Where is this documented?

Thanks for your help!

[ilya_shaikovsky]

Unfortunatelly some classes could be missing in documentation.. And as 3.3.3 is the last release in 3.3.x branch I would prefer not to create specific issue on that. We will review the 4.x guide during movement carefully And if you believe that missed some usefull class in docs - just use Firebug to check all applied ones(as I actually done this )