Hover interaction overrides :focused state

Design help Animations & Interactions
1

Hello everyone,

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!

2

According to Interaction overrides hover state, any interaction that changes CSS properties, writes those changes as inline CSS into the HTML. Any CSS properties in the designer are being disregarded afterwards. This explains my problem.

Further research led me to a solution. The following two links were essential:

Is it possible to fire an interaction when a form field is selected via keyboard?

How to affect other elements when one element is hovered

I was able to solve the problem by deleting all interactions and using a little bit of custom CSS:

<style>
	.heading__container:hover > .anchor__container {
		opacity: 1;
	}
</style>

.anchor__container is a child of .heading__container, which is why the CSS combinator works.