Change The Color Of The Particular Header On Mouse Over

My problem is when i mouse over the fois header its text doesn't changes to white color i don't know where i am wrong.or what to include.please help me........ another problem when

Solution 1:

Because it's wrapped in <a></a> tag and the others are not wrapped in <a>

Demo

<li><h2id="fois">FOIS</h2> // Your <h2> is wrapped in <a></a> here
</li>

Solution 2:

You are declaring color: black; using inline CSS, which will be only overridden if you use !important in your stylesheet.

Secondly you need to target a element and not h2 because a will not inherit the parent elements color unless you specify something like a {color: inherit;} which will make all the a elements in your document inherit parent color, or to be specific you can use .accordion1 li h2 a {color: inherit;}, if you use this selector, than you don't have to target a else you need to as I've shared below..

.accordion1li:hoverh2a {
    color: white !important;
    background-image: url("./compo_images/arrow_exp_n.gif");
    background: url('compo_images/gradient_v_orange.gif') repeat-x;
}

I would suggest you to remove the inline style instead, and you won't have to use the !important anymore.

Demo

Solution 3:

Change

<h2id="fois"><ahref="#"style="text-decoration:none;color:black;">FOIS</a></h2>

To

<h2id="fois"><ahref="#">FOIS</a></h2>

And change

.accordion1li:hoverh2 {

To

.accordion1li:hoverh2,
.accordion1li:hoverh2a {

Solution 4:

Looks to me that your problem is with the inline style on the anchor element. This has a higher specificity than any style in a style sheet so should be used with moderation.

If you remove

color:black

from the anchor, and add:

color:black

to:

.accordion1h2

That should do the trick.

Solution 5:

Add Below class in your style

#foisa:hover{
     color: white !important;
    }