Is there a clever way to disable CSS transitions for specific elements in an HTML document?
If we have this CSS rule that applies a transition to all elements:
* {
transition: all 0.35s ease-in-out;
}
How can I override this transition effect for text elements, so that text does not undergo the transition? This includes elements like p, h1, h2, h3, h4, h5, h6, as well as any other element containing text.
The following code snippet illustrates what should NOT occur. The background-color transition is expected, but the text should remain unaffected by the transition.
* {
transition: all 0.35s ease-in-out;
}
.egodiv {
font-size: 12px;
color: black;
background-color: white;
}
.egodiv:hover {
font-size: 20px;
color: white;
background-color: red;
}<!DOCTYPE html>
<html>
<body>
<div class="egodiv">Look at me now!</div>
</body>
</html>