EN
CSS - bold text on hover
3
points
In this article, we would like to show you how to bold the text on hover event using CSS.
Quick solution:
.class-name:hover {
font-weight: bold;
}
Where: the :hover CSS pseudo-class is triggered when the user moves mouse cursor over an element, changing the element style to the one specified within curly brackets.
Practical example
In this example, we bold the text inside div.text element on hover event using .text:hover pseudo-class with font-weight property set to bold.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.text:hover {
font-weight: bold;
}
</style>
</head>
<body>
<div class="text">Hover me to bold this text.</div>
</body>
</html>