Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
2K+ Views
To Continue Learning Please Login