[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
    Posts
  • #1153052
    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;
    }
    #1153072
    David
    Staff
    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

    #1153100
    Michael

    Thank you very much David – that works perfectly 🙂

    #1153101
    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

    #1153110
    David
    Staff
    Customer Support

    try:

    button.collapsible {

    #1153178
    Michael

    That works like a charm – thank you David!

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