I’m building a very simple FAQ accordion, as you can see from the share link below.
I’ve managed to get it to open and close and change the heading bg and font colours when open and when shut… No issues there.
However for the simple mouse on hover interaction, I can’t for the life of me get only the heading that’s being hovered over to change. All the headings change at once.
I’ve tried all the various permutations re only affect sibling etc…
Thanks for your kind reply. I’ve watched Webflow University (and other videos) that Maguire and Grimur share with us, several times; for education and entertainment. That’s not the issue.
Adding a hover effect is simple, as you point out.
What I want is, to have the bg colour of the active question (open accordion heading) to remain red when that answer is open. And to return back to no bg, when closed. And for that I need to add an interaction… unless there’s another way you know…?) And I 've done that. That part works.
What I need is the initial hover…
For this, if I use the transition that you point out (and I did originally), it obviously works… however, when the accordion is opened and then closed, the hover (the standard way you recommend adding it) does not work a second time… Which is why I’ve been trying to add it as an interaction… Where I face the problem I posted… Can that be solved?
This example is only custom code (CSS, JS) in embed approx 20 lines so nothing complicated. As you can see on live example when you click second time tab to close accordion, tab (trigger) still remain red as there is active on hover action on trigger. There is no easy way (if any) to achieve canceling hover effect when element is still hovered. There may be a way to on hover bring second class with identical setting as on click but I didn’t tried it as IMHO it not a clean solution (I don’t thing so). So you can spend some time to figure out if it is possible or just compromise on solution. Or someone else can help you with that .
