How to change the color of the background of an FAQ question section when hover with the mouse?

[Jim3]

How to change the color of the background of an FAQ question section when hover with the mouse?
I already have this effect but is too light. I want to make more noticeble by making it more dark Or to add a very black circle on the arrow when hover with the mouse. Like this website did: High Waist Denim Balloon Jeans

This is my website. And the liquid of the FAQ section is named: faq-accordation.liquid

Cignella Crane™ Shoes

[namphan]

Hi @Jim3,

I checked and did you solve it?

[oscprofessional]

Hi @Jim3 ,
Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file

.faq-section button.faq-question:hover {
    background: #b5b5a0 !important;
}

[Parampreet]

Hi @Jim3 Merchant
Please add below css in base.css:

#shopify-section-template–24619532353864__faq_accordion_cRUEqc .faq-question:hover {
background-color: #b0b0b0;
}

.faq-item .faq-icon:hover {
transform: rotate(180deg);
background: black;
border-radius: 50px;
color: #fff;

And it will show like below screenshot:

[Parampreet]

also add below css:
.faq-question:hover .faq-icon{
background: black;
border-radius: 50px;
color: #fff;
}

[Jim3]

Hello, to everyone who texted and thank you! Actually some things worked but I want to make a slightly different design of this section. So basically as the store velthentic.com it has this FAQ section I want mine. I am attaching a picture of it bellow. Whats the difference with mine is that there is grey background color behind all the faqs and makes the section visible. I want that too + the Bold letters of the question + the way when we are over the question the arrow on the side turns black. How to create that FAQ’s section please?

[Parampreet]

Please update the css to below:

.faq-list {
display: flex;
flex-direction: column;
gap: 16px;
background: #ddd;
border: none;
}
.faq-question:hover .faq-icon {
display: flex;
flex-direction: column;
gap: 16px;
background: #000;
border-radius: 100px;
color: #fff;
}

.faq-question:hover {
background: #b0b0b0;
}

It will show below type of layout. Please like if you find this useful.

[Jim3]

Hi,
We are close. Is almost the same but as you see on the example FAQ tab there only the arrow showing in black circle when we hover over the question.. I dont want in this case the background of the question to switch color as well. Let the background color stay grey as all other question and only the arrow to show with black circle on the question we hover on. Do you understand? Thank you very much for your patience!

[Parampreet]

OK, so in this case just remove below css:

#shopify-section-template–24619532353864__faq_accordion_cRUEqc .faq-question:hover {
background-color: #b0b0b0;
}

.faq-question:hover {
background: #000;
}
Final working solution is below:

1. Find .faq-item and .faq-list classes in css file and replace with below:

.faq-item {
/* border: 1px solid #e5e5e5; /
/ border-radius: 8px; /
/ overflow: hidden; */
border-bottom: 1px solid #e5e5e5;
}

.faq-list {
display: flex;
flex-direction: column;
gap: 16px;
background: #f2f2f2;
border: none;
}

and add below css:

.faq-question:hover .faq-icon {
display: flex;
flex-direction: column;
gap: 16px;
background: #000;
border-radius: 100px;
color: #fff;
}

[Jim3]

@Parampreet

#shopify-section-template–24619532353864__faq_accordion_cRUEqc .faq-question:hover {
background-color: #b0b0b0;
}

.faq-question:hover {
background: #000;
}
Final working solution is below:

1. Find .faq-item and .faq-list classes in css file and replace with below:

.faq-item {
/* border: 1px solid #e5e5e5; /
/ border-radius: 8px; /
/ overflow: hidden; */
border-bottom: 1px solid #e5e5e5;
}

.faq-list {
display: flex;
flex-direction: column;
gap: 16px;
background: #f2f2f2;
border: none;
}

and add below css:

.faq-question:hover .faq-icon {
display: flex;
flex-direction: column;
gap: 16px;
background: #000;
border-radius: 100px;
color: #fff;
}

Where do you add this code?
Because I add it in 3 places and non of it workout.

[Parampreet]

@Parampreet

.faq-item {
/* border: 1px solid #e5e5e5; /
/ border-radius: 8px; /
/ overflow: hidden; */
border-bottom: 1px solid #e5e5e5;
}

.faq-list {
display: flex;
flex-direction: column;
gap: 16px;
background: #f2f2f2;
border: none;
}

and add below css:

.faq-question:hover .faq-icon {
display: flex;
flex-direction: column;
gap: 16px;
background: #000;
border-radius: 100px;
color: #fff;
}

Add in /assets/theme.css
.faq-item {
border-bottom: 1px solid #e5e5e5 !important;
}

.faq-list {
display: flex;
flex-direction: column;
gap: 16px;
background: #f2f2f2 !important;
border: none !important;
}

.faq-question:hover .faq-icon {
display: flex;
flex-direction: column;
gap: 16px;
background: #000;
border-radius: 100px;
color: #fff;
}

[Jim3]

I am sorry but I still don’t understand where should I add this? That’s why I sand 3 screenshots to show you the different places

[Parampreet]

Please see below:
Go to Online store → Themes → Edit code and search for theme.css or base.css

[Jim3]

There is no base.css. This is Impulse theme. There theme.css.liquid and if is about this place, the code doesn’t work then because I already tried there

[Parampreet]

In your shared screenshot I can see the theme.css just above the theme.css.liquid file. Can you please try.

[Parampreet]

Or you can add css in Themes → Customize → Custom CSS
.faq-item {
border-bottom: 1px solid #e5e5e5 !important;
}

.faq-list {
display: flex;
flex-direction: column;
gap: 16px;
background: #f2f2f2 !important;
border: none !important;
}

.faq-question:hover .faq-icon {
display: flex;
flex-direction: column;
gap: 16px;
background: #000;
border-radius: 100px;
color: #fff;
}

[Parampreet]

[Jim3]

I give you solution for this because it made the changes. But the design sucks so I woudn’t use it. Coudn’t we copy their table somehow?

[Jim3]

And also how can we decrease this spacing?

[Parampreet]

To reduce spacing add below :

.faq-section {
padding-top: 0px !important;

}