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

Home Forums Support Background colour on a class changing on hover?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #1153052

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

    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;
    Customer Support

    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


    Thank you very much David – that works perfectly 🙂


    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

    Customer Support


    button.collapsible {


    That works like a charm – thank you David!

    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.