How to add custom hover color to child interactions

[ArtOfSpring]

Hi there,

I have a post element (HTML tag <a>) with linked child interactions.
It contains a text and a headline element.

Within the headline element are a headline and a subline. For the headline I’m working with text-stroke instead of font-color to show only the outline. To achieve that I’m using custom CSS for the element (also for hover state). But now the hover state of it is not linked to the other elements anymore.

If you hover over the text element or the subline all linked child elements change to the hover color except for the headline with the custom CSS text-stroke. How can I link the hover state to the other child elements?

[tristup]

Hi @ArtOfSpring,

Thanks for reaching out.
I have checked and found the following custom CSS code is overriding the Child Interaction from the parent element. And when you mouse over the Headline it acts on the custom CSS code added into the Element CSS and also parent element interaction color for other elements and sub-headline.

.lol .x-text-content-text-primary 
{
  -webkit-text-stroke: #29b6f6 2px;
}

Please remember that child interaction for the color only works with the color you set into the attributes of the elements, not over the custom CSS.

Thanks

[ArtOfSpring]

Hi there, it is intended that custom CSS is overriding the parent element because there is no text-stroke setting. My question is how do I change my custom CSS for the hover state so it will be executed at the same time like the other child elements. So if someone hovers over the subline the headline will also be shown in hover state.

[tristup]

Hi @ArtOfSpring,

I am sorry if I was not explained it properly. It is not possible in the way you have tried, you need to add the following custom CSS code into the Element CSS of the Post element to get it to work.

$el:hover .lol .x-text-content-text-primary 
{
    -webkit-text-stroke: #ffffff 2px;
}

I have tested the above code by adding it to the ELement CSS of the Post element and now the interaction color is working for the headline.

Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail One, where we answer the questions beyond normal theme support.

Thanks

[ArtOfSpring]

Thanks a lot! That’s doing it

[tristup]

Hi @ArtOfSpring,

Glad that we are able to help you.

Thanks