I’ve seen this question asked a few times but I’m not really clear on the answer. I have an H1, H2, and image inside of a link block and the H1 and H2 have their own unique styling. Essentially, I want control over the styling of all three elements when hovered over the link block. Example; I want to change the colour of the h1, the colour of the h2, and change the image. Obviously, the options in the link box editor doesn’t allow me to do this. What am i doing wrong? What should I be doing?
Elements can inherit properties from their parents. A text element inside of a box element can inherit text color and hovered text colors that are defined on the box element (its parent) if no text color or hovered text color have been defined on it specifically.
What is possible:
hovering a link block and it changes all the children text elements color, with the same color (the hover color defined on the link block)
What’s not possible:
hovering a link block and H1 goes red and H2 goes gray (2 different colors)
How to achieve the effect anyway:
use interactions to hide all the content on hover of a link block, and show another content (same content but with other colors). But you have to deal with duplicate content.
use javascript (you need to know how to code JS or ask a coder)