The CSS :hover selector is a pseudo-class that applies styles to an element when the mouse pointer is placed over it.
- Applies styles when an element is hovered by the mouse.
- Commonly used with the :link selector, :visited selector, and :active selector to style links in different states.
- Provides visual feedback and improves user interaction.
- Can be used with various HTML elements such as links, buttons, and images.
Syntax:
selector:hover {
property: value;
}Examples of Hover Effects
Here are some practical examples to illustrate how to add hover effects using CSS.
Example 1: Changing Background Color on Hover
Output:
👁 Image
Example 2: Revealing a Hidden Block on Hover
Output:
👁 Image
Example 3: Changing Font Color on Hover
Output:
👁 Image
Example 4: Changing Font Family on Hover
Output:
👁 Image
Example 5: Adding Underline on Hover
Output:
👁 Image
