Áp dụng style khi phần tử được trỏ chuột - :hover - trong CSS

Triggering style changes when a mouse pointer hovers over an element can significantly enhance the user experience on a website. CSS provides a pseudo-class known as :hover that is instrumental for applying styles dynamically as users interact with elements such as links, buttons, images, and more. This feature not only adds an aesthetic layer to your design but also provides clear visual feedback, making your website more intuitive and engaging.

Basic Usage of :hover

The primary function of the :hover pseudo-class is to define the appearance of an element when the user places the cursor over it. The syntax is straightforward. For instance:

a:hover {
    color: red;
}

In this example, when a user hovers over a link, its color will change to red.

Hovering on Different Elements

While anchoring tags (<a>) are the most common elements utilizing the :hover pseudo-class, it can be applied to virtually any HTML element:

Buttons

button:hover {
    background-color: blue;
    color: white;
}

Here, when hovering over a button, its background color changes to blue, and the text color changes to white.

Divs and Images

div:hover {
    border: 1px solid black;
}

img:hover {
    opacity: 0.7;
}

These rules apply a border to a <div> and change the opacity of an <img> element when the user points the cursor over them.

Transition for Smoother Effects

To make the change appear smoother, CSS transitions can be used alongside :hover. For instance:

a {
    color: blue;
    transition: color 0.3s;
}

a:hover {
    color: red;
}

This snippet specifies a transition duration of 0.3 seconds, providing a smooth color change.

Advanced Effects with :hover

Text Effects

Hover effects can include text transformations and decorations:

p:hover {
    font-size: 1.2em;
    text-decoration: underline;
}

In this case, the paragraph text increases in size and gains an underline on hovering.

Background and Box Shadow

Applying background changes and shadows can give a 3D effect or a button-like appearance:

div:hover {
    background-color: yellow;
    box-shadow: 5px 5px 15px grey;
}

This rule changes the background to yellow and adds a shadow, creating a lifting illusion.

Hover and Sibling Selectors

The :hover pseudo-class can also trigger style changes in sibling elements, enhancing interaction designs. For example:

.container:hover .text {
    color: green;
}

.container:hover .image {
    transform: scale(1.1);
}

These styles are applied to .text and .image elements within .container when the user hovers over .container.

Practical Examples

Navigation Menus

Navigation menus often employ hover effects to provide users with a cue that an item is clickable:

nav ul li:hover {
    background-color: #eee;
    color: #333;
}

Cards and Grid Items

For cards in a grid layout, hover effects add a modern touch:

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

These styles enlarge the card slightly and add a shadow, making it more prominent.

Conclusion

Using the :hover pseudo-class in CSS significantly enriches user interactions on a webpage by enhancing visual feedback. Whether for aesthetic purposes or to highlight interactive components, mastering :hover is crucial for creating a dynamic and responsive web design. With various possibilities, ranging from simple color changes to complex animations, the only limit is your creativity.