CSS Link Hover

The :hover pseudo-class gives you a nice effect when a visitor hovers their cursor over a link. It is triggered when the user uses a pointing device to interact with an element, but it is not always activated. It is usually triggered when the user moves the cursor over an element (mouse pointer).

What is the Hover Effect in CSS?

When a user hovers over an element, the element responds with transition effects, known as a CSS hover effect. It’s a practical approach to improving user experience by highlighting essential elements on a web page. Adding CSS link hover effects to an otherwise dull webpage might give it a little flair.

    
	   a:hover {
		  text-decoration: none;
	   }
	   a:hover {
		  text-decoration: overline;
	   }
	   a:hover {
		  text-decoration: underline;
	   }
	   a:hover {
		  background-color: #016;
	   }
    

Link Hover Examples

Hover Effects

The hover feature includes the following effects:

• Change the color of the background and font.
• Modify the opacity of the image.
• Text embedding.
• Create image rollover effects.
• Swapping of images.

Use-case that is not supported

On touchscreens, the :hover pseudo-class is problematic. Depending on the browser, the :hover pseudo-class may never match, match only for a few elements after touching an element, or match even after the user has stopped touching and until the user touches another element. According to web developers, content should be available on devices with restricted or non-existent hovering capabilities.

Make a ‘fade-in’ and ‘fade-out’ effect.

To create a ‘fade-in’/’fade-out’ effect, use the :hover CSS Pseudo-Class with the Opacity Property. Using the :hover selector, change an element’s ‘opacity’ attribute to produce a ‘hover-over’ effect. The ‘opacity’ attribute specifies an element’s transparency degree (in this case, an image and paragraph text).

You can vary how ‘faded’ an image seems by adjusting the opacity. You can set the opacity of an element to change on mouse-over with the :hover selector to create a ‘fade in’ or ‘fade out’ effect.