Accordion/collapse hover problem [solved]

[truegota]

The site this is happening on is here (ignore the right container with WORD, it's just to have the hover text code on hand). And most of the links aren't working yet, since I have yet to make the pages for them.
essence-of-horhsal.boards.net/page/worldbuilding
If you hover over the grey thing with the + in it, the accordion, you will notice that it suddenly has two colours and looks kinda weird but it goes away once you click on it. Although minor, the two colour weird looking thing is still something that bothers me, so I'd wonder if someone knows how to correct it.

This is the code for it
codeshare.io/5DVmVm

[Tiffy-Bean]

If I'm understanding you correctly, I think it's the active hover color.

try taking out:

.active, .accordion:hover {
   background-color: black;
}

Or, alternatively you can replace it with

.active, .accordion:hover {
   background-color: transparent;
}

[Tiffy-Bean]

Or are you talking about the slight variation of grays between a link you're actively looking at and the other options below it?

[Tiffy-Bean]

.accordion.active {
 background-color: #161a2d!important;
 }



should fix that..I think. Use color as desired, of course.

[truegota]

Sadly, none of it worked. Oh, and I'm talking about this: fs1.directupload.net/images/171224/z22vrzjy.png
The suddenly two-colours thing

[Tumbleweed]

truegota ,

Try this on the hover part.


.accordion:hover {background-image:none;
background-color: #161a2d!important;
}

(Tiffy-Bean , I would of thought what you suggested would have worked too.)

On a side note and for future reference, Truegota, instead of all those non-breaking spaces you have in the html you could have just used css. Something like this for example: (Just cleans up the html and easier for you to find things plus if you change your mind on say the number of spaces, you just need to edit the css rather than go add or subtract the non breaking spaces in each line. )


.panel a:before {
content: "   -";
}}

(if you put spaces in the content area via your space bar on your key board, those spaces will be there when rendered by your browser. )

[truegota]

Dec 24, 2017 9:32:34 GMT -8 Tumbleweed said:

truegota ,

Try this on the hover part.


.accordion:hover {background-image:none;
background-color: #161a2d!important;
}

(Tiffy-Bean , I would of thought what you suggested would have worked too.)

That finally fixed it, thanks a lot!

[Tumbleweed]

truegota , I added a tip and edited my previous post not knowing you already replied. It's just a tip for future reference.


Anyway, glad that worked. I'm still not sure why it was doing that other than browsers color their buttons a certain color but it still didn't make sense to me why it was doing that. I'm just glad I found a fix.

[Tiffy-Bean]

Honestly Tumbleweed, your suggestion was my next suggestion. Lol. I'm glad you got to it quicker than me. I'm glad it was solved. All my love.