Changing the border color on hover is a common and effective way to enhance the interactivity and visual appeal of web elements.
There are two methods to change the border color, these are:
Using CSS hover Pseudo Class
In this section, we use CSS :hover pseudo-class to add border color on hover over the element.
Example: In this example, we use a CSS pseudo selector to change the border color on mouse hover.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Change Border Color on Hover</title>
<style>
body {
text-align: center;
}
.GFG {
display: inline-block;
padding: 30px 50px;
border: 5px solid black;
}
.GFG:hover {
border: 5px solid green;
}
</style>
</head>
<body>
<div class="GFG">
GeeksforGeeks
</div>
</body>
</html>
|
Output:
Using JavaScript onmouseover and onmouseout Events
The onmouseover and onmouseout events are used to call a function on mouse hover over and move out respectively on the element. We change the border color on onmouseover event, and reset the original border color when mouse move out from the element.
Example: In this example, we will use JavaScript to change border color on mouse hover.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Change Border Color on Hover</title>
<style>
body {
text-align: center;
}
#GFG {
display: inline-block;
padding: 30px 50px;
border: 5px solid black;
}
</style>
</head>
<body>
<div id="GFG" onmouseover="mouseOver()"
onmouseout="mouseOut()">
GeeksforGeeks
</div>
<script>
function mouseOver() {
document.getElementById("GFG")
.style.borderColor = "green";
}
function mouseOut() {
document.getElementById("GFG")
.style.borderColor = "black";
}
</script>
</body>
</html>
|
Output: