Change hover color of Collapsible Content

Store Design
1

Hi! I’m looking to change the hover color of collapsible content

By default, mine turns gray whenever I hover it (like pic below)

Screen Shot 2022-07-07 at 1.59.39 PM.png
Screen Shot 2022-07-07 at 1.59.39 PM.png934×138 3.32 KB

However, I would like the background to stay white and the text to turn into other color instead.

I’m using the Sense theme and I was able to change my Collapsible content’s font size with these code

.accordion__title {font-weight: bolder;    font-size: 25px;}
  
.accordion__content p {font-size: 18px;}

I’m not sure how to customize the hovering part tho? Any help would be greatly appreciated!! Thank you :slightly_smiling_face:

1 Like
2

@chocolatte1234

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi @chocolatte1234 ,

Go to Assets > base.css and paste this at the bottom of the file:

.collapsible-content summary:hover {
    background: transparent !important;
}
.collapsible-content summary:hover .accordion__title {
    text-decoration: none !important;
    color: #9E5C8B !important;
}

You can change the color code to your liking.

Hope it helps!

1 Like