CODEWITHSUNDEEP
jqueryhtmlcss
samwick
samwick

Reputation: 167

how to make text color change on mouse over

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?

Upvotes: 1

Views: 991

Answers (3)

FelipeAls
FelipeAls

Reputation: 22171

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

Upvotes: 0

Praveen Prasad
Praveen Prasad

Reputation: 32127

do this

.tab_item:hover
{
 color:#ffffff;
}

Upvotes: 1

Nikita Rybak
Nikita Rybak

Reputation: 68036

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.

Upvotes: 1

Related Questions