I am trying to remove the text color value from of my elements. I am doing this so it can inherit the text color values from the Div the text is in. Basically I want the text to change color when the parent div if hovered.
If anyone knows a different way to change the color of text when the parent div is hovered, please let me know!
@Digital_Precision - Hello and welcome to the webflow forums.
You can do this with just CSS. Let’s start with a div that will be the parent for the text you wish to have the color change on the div: hover state. I will add a class called “blue” to the div, then set the text color to blue. On div.blue hover, set the text color to your choice.
Then add your text element to this div. Preview and you will see that it indeed changes color since it is inheriting the color defined by the div hover states. That is CSS inheritance.
An unexpected behavior (for a user) could occur if you assign a more specific rule to the text block by adding a class. The new class will be more specific so that is what will be displayed to the user, regardless of hovering on the div.blue element. This is the expected behavior.
This demonstrates CSS inheritance and CSS Specificity. More info below.