Languages
[Edit]
EN

CSS - bold text on hover

0 points
Created by:
Fletcher-Peralta
508

In this article, we would like to show you how to bold the text on hover event using CSS.

Quick solution:

div:hover {
  font-weight: bold;
}

The :hover CSS pseudo-class is triggered when the user hovers over an element with the cursor, changing the element style to the one specified within curly brackets.

 

Practical example

In this example, we bold the text inside div element on hover event using div:hover pseudo-class with font-weight property set to bold.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    div:hover {
      font-weight: bold;
    }

  </style>
</head>
<body>
  <div>Hover me to bold this text.</div>
</body>
</html>

References

Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join