Css Hover

What is Hover in CSS?

The ::hover pseudo class can be used to modify the style of a given element when the user moves the pointer over it with the mouse.

It is importantly utilised to enhance the interactivity on the webpage by adding effects to the elements.

Basic Hover Effect:

This example changes the background color and text color of a button when the user hovers over it.

                          
                            button:hover {
                                background-color: #3498db; /* Change background color on hover */
                                color: #fff; /* Change text color on hover */
                            }

Hover Effect with Transition:

This example adds a smooth color transition to a link when the user hovers over it.

                          
                            a {
                                color: #333; /* Default text color */
                                transition: color 0.3s ease; /* Add a smooth transition for the color change */
                            }
                            
                            a:hover {
                                color: #3498db; /* Change text color on hover */
                            }

Hover Effect on Image:

This example enlarges an image when the user hovers over it using the transform property.

                          
                            img:hover {
                                transform: scale(1.1); /* Enlarge the image on hover */
                            }

Hover Effect with Opacity:

This example changes the opacity of a div on hover with a smooth transition effect.

                          
                            div {
                                opacity: 0.8; /* Default opacity */
                                transition: opacity 0.3s ease; /* Add a smooth transition for the opacity change */
                            }
                            
                            div:hover {
                                opacity: 1; /* Increase opacity on hover */
                            }

Hover Effect on Navigation:

This example changes the text color and adds an underline to navigation links when the user hovers over them.

                          
                            nav a {
                                color: #333; /* Default text color for navigation links */
                            }
                            
                            nav a:hover {
                                color: #3498db; /* Change text color on hover */
                                text-decoration: underline; /* Add an underline on hover */
                            }

Hover Effect on List Items:

This example changes the background color of list items when the user hovers over them.

                          
                            ul li:hover {
                                background-color: #f2f2f2; /* Change background color on hover */
                            }

Hover Effect on Form Input:

This example changes the border color of a text input when the user hovers over it.

                          
                            input[type="text"]:hover {
                                border-color: #3498db; /* Change border color on hover for text input */
                            }