Jump to content

How to change section background when hovering on accordion titles

Recommended Posts

  • Replies 3
  • Views 418
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hey @moretrobin love this idea - and totally possible with CSS! To change any accordion background to red on a hover, use this code:

.accordion-item__click-target:hover{
background:red
}

Hope that helps and best of luck with your project!

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment
On 6/6/2023 at 11:23 PM, inside_the_square said:

Hey @moretrobin love this idea - and totally possible with CSS! To change any accordion background to red on a hover, use this code:

.accordion-item__click-target:hover{
background:red
}

Hope that helps and best of luck with your project!

Thank you so much! actually, I'm trying to change the background of the entire section, not only the background on the accordion. Moreover, I'm trying to have a different color background when hovering each accordion title. Is that doable ?

Edited by moretrobin
Link to comment
On 6/8/2023 at 2:41 PM, moretrobin said:

Thank you so much! actually, I'm trying to change the background of the entire section, not only the background on the accordion. Moreover, I'm trying to have a different color background when hovering each accordion title. Is that doable ?

You mean hover on each accordion item >> change whole section color (red box)?

image.thumb.png.60ae3d2d6c2b8e2eaeeeaedf7ebd19c1.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.