how to make text color change on mouse over

Question

Page I'm working with is: http://cloudninetech.com/newsite/site/homepage.html

Notice the tab slider at the bottom. I wish to make the headings text white when the current tab is selected.

I'm not able to do this because I think the color can only be changed by modifying the tabbedContent.js jQuery plugin

Can someone suggest a way to do this?

Answer 1

Impossible with this plugin, as it creates illusion of tab selection by putting .moving_bg element on top of current tab. It doesn't change tab itself in any way.
Most jquery ui libraries add some custom class (e.g., 'current') to currently selected element, thus allowing you to customize its look through css.

And since your example doesn't work with firefox anyway, I recommend switching to one of more popular ui libraries.

Answer 2

do this

.tab_item:hover
{
 color:#ffffff;
}

Answer 3

You'd better use another plugin, for the reasons stated by @Nikita Rybak
jQuery Tools Tabs is highly customisable and still lightweight.

You could still modify the plugin; adding $(this).css({}); in the .mouseover() function should be sufficient

Or add

.tabs .tab_item:hover,
.tabs .tab_item:focus {
  color: white !important;
}

Pseudo :focus is for keyboard users (though the plugin lacks a focus/blur event management, alas).