[Resolved] Background colour on a class changing on hover?

[Michael]

Hi David,

If you have a moment, please could you tell me what I am missing with my table of contents code? It’s working pretty much, except for reasons unknown to me, the hover on the title is shifting the colour from green to grey (when it should just be changing the opacity of the green):
https://reclaimdesign-383226.easywp.com/faq/

I can’t see where the grey is coming from at all:

.collapsible {
  	background-color: #539c22;
	border: 0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
  	color: #ffffff;
  	cursor: pointer;
	font-family: 'Carrois Gothic', sans-serif;
	font-size: 20px;
	/*line-height: 30px;*/
	line-height: 1.3em;
	outline: none;
	padding: 20px;
	text-align: left;
	text-transform: uppercase;
	transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
  	-o-transition: opacity 0.3s ease-in-out;
  	-webkit-backface-visibility: hidden;
	-webkit-transition: opacity 0.3s ease-in-out;
  	width: 100%;	
}

.collapsible:hover {
	opacity: 0.7 !important;
}

.collapsible:after {
  	color: #ffffff;
	content: '\002B';
	/*font-size: 30px;*/
	font-size: 36px;
  	float: right;
  	margin-left: 5px;
}

.active:after {
  	content: "\2212";
}

ul.content {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom: 1px solid #d0d0d0;
	border-left: 1px solid #d0d0d0;
	border-right: 1px solid #d0d0d0;
	border-top: 0;
	box-shadow: 0 0 0;
	margin: 0;
  	max-height: 0;
  	overflow: hidden;
	padding: 0 20px;
	text-align: left;
  	transition: max-height 0.3s ease-out;
}

li.toc {
	list-style: square;
	margin-left: 15px;
	padding: 10px 0 0 10px;	
}

ul li.toc:last-child {
    padding-bottom: 10px;
}

[David]

Hi there,

its getting the button:hover colors from the theme.

You can either edit the Customizer > Colors > Buttons – if that is to be the theme style
or you will need to include the background color within your .collapsible:hover

[Michael]

Thank you very much David – that works perfectly 🙂

[Michael]

Actually, it works but when I am not hovering it reverts to the grey colour, so I set:

.collapsible {
  	background-color: #539c22 !important;
}

And that seems to do the trick

[David]

try:

button.collapsible {

[Michael]

That works like a charm – thank you David!

[David]

You’re welcome

[Author]

Posts