I’m trying to achieve the following: I want to have a heading with an anchor right next to it. The anchor should be invisible and only come into view, when the user is using TAB on the keyboard. Furthermore, the anchor should be visible, when the user hovers over the heading.
I was able to achieve the first part by simply giving the anchor container an opacity of 0, which changes to 100, when the element is :focused. I’m of the impression, that I can only trigger the opacity of the anchor container when hovering over the heading container by using an interaction. I created an interaction where the anchor container has an opacity of 100, when the mouse hovers over the heading container. This reverts back to 0, when the mouse hovers off the heading container. This in itself works, but as soon as this interactions has runs once, I cannot make the anchor become visible when focused. I have to hover over the heading container (based on the interaction) to make it visible again.
It seems like the interaction overrides the :focused state, forcing me to hover over the heading container for it to show. Is this a bug or am I missing something very obvious?
Is anyone able to help me out? I would love your input on this as I haven’t been able to find a similar issue online or sort it out myself. Thanks!