How to change tab header text color when hovering ?

SFTab control:

I copied this from one of yours online documentation but it only works for background color and not for the text color

/*Use the following CSS to customize the tab item when hovering.*/

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {

background: blue;   WORKS

color: white;            DOES NOT WORK

}



1 Reply 1 reply marked as answer

VD Vinitha Devi Murugan Syncfusion Team October 3, 2022 09:45 AM UTC

Dear Customer,


Greetings from Syncfusion Support.


We have validated your reported query “How to change tab header text color when hovering” at our end. We suggest you to use below CSS to achieve your requirement.


.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text,

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {

    color: white;

}


Kindly try like above sample and get back to us if you need any further assistance.


Regards,

Vinitha


Marked as answer
Loader.
Up arrow icon