How to add border to an element on mouse hover using CSS?


CSS provides developers with tremendous power to customize and style their page in whatever way they want. One of the many features it provides to enable this level of customization is the ability to add interactivity to web elements. Hover effects can provide a more dynamic user experience. By applying a border to an element on mouse hover, the user is given a visual cue that they have interacted with that element.

Syntax

selector:hover {
   /* CSS property and values to be applied on hover */
}

:hover Selector

The :hover selector in CSS is used to apply styles to an element when it is being hovered over by the mouse cursor.

Here, selector refers to the element(s) that you want to apply the styles to when the mouse hovers over it.

Approach

Using CSS, it is quite easy to add border to an element on mouse hover. We are going to make use of the above mentioned :hover selector to access the element when it is hovered. As and when it is hovered, we will add a border property to the element to add border to the element.

Example

The following HTML section consists of a <div> which acts as the container, in which three <p> elements are present. These <p> tags act as the elements on which we will apply the hover effect later using CSS.

Talking about the second CSS section, we have used the CSS part to add some styling to the webpage. We have made use of the :hover selector. We have specified the styling rule there in such a way that whenever the user hovers over any of the <p> elements, a border will appear around that element.

<!DOCTYPE html>
<html>
<head>
   <title>How to add border to an element on mouse hover using CSS?</title>
   <style>
      p:hover{
         padding: 2px;
         border: 2px solid black;
      }
   </style>
</head>
<body>
   <h4>How to add border to an element on mouse hover using CSS?</h4>
   <div>
      <p>Element 1</p>
      <p>Element 2</p>
      <p>Element 3</p>
   </div>
</body>
</html>

Conclusion

As a final point, the inclusion of an outline to a constituent upon mouse levitation exploiting CSS is an uncomplicated and efficacious method of augmenting the visual charm and consumer involvement of a website. Through the integration of this characteristic, artisans and programmers can manufacture a more captivating and collaborative browsing occurrence for their consumers. Additionally, the adaptability of CSS enables personalization and trial with diverse outline manners and impressions. With a smidgen of cleverness and novelty, the probabilities for fashioning unparalleled and marvelous patterns are boundless. All in all, this instruction piece has administered an all-inclusive manual on how to realize this consequence, and with a modicum of training, anybody can achieve mastery of this infrequently employed but influential CSS technique.

Updated on: 10-Apr-2023

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements