EN
CSS - text color change on hover
0
points
In this article, we would like to show you how to change text color on hover using CSS.
Quick solution:
div:hover {
color: red;
}
Practical example
In this example, we use CSS :hover pseudo class to create a separate style for div that is hovered. In order to change the text color, we use CSS color property.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div:hover {
color: red;
}
</style>
</head>
<body>
<div>Hover me to change the color</div>
</body>
</html>
Class selectors
In this example, we present a practical example of how to use the :hover with class selectors. In order to change the text color, we use color CSS property.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.my-element:hover {
color: green;
}
</style>
</head>
<body>
<div class="my-element">Hover me to change the color</div>
</body>
</html>