The :hover pseudo-class in CSS is used to apply styles to an element when a user hovers their mouse pointer
over it. It allows you to create interactive and visually engaging effects on web elements when users
interact with them, such as buttons, links, images, and more.
The primary purposes and use cases of the :hover pseudo-class are as follows:
- Interactive Links
- Button States: `hover`
- Navigation Menu
- Image Effects: `hover`
- Tooltip Triggers
Example:
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
font-size: 22px;
}
</style>
</head>
<body>
<h2>Pseudo-classes and HTML Classes</h2>
<p>When you hover over the first link below, it will change color and font size:</p>
<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
<p><a href="default.asp">CSS Tutorial</a></p>
</body>
</html>
Output:
Pseudo-classes and HTML Classes
When you hover over the first link below, it will change color and font size:
CSS Syntax
CSS Tutorial
