In this post, we will learn how to apply border to an element on mouse hover without affecting the layout in CSS. This is a common problem that a developer has to face while creating a website. This is a common problem that bothers a developer while creating a website. So how we can get rid out of this problem, we will learn in this post.


How To Apply Border To An Element On Mouse Hover Without Affecting The Layout In CSS ?


Apply Border To An Element On Mouse Hover Without Affecting The Layout

When we apply border to an element on mouse hover then it disturbs the surrounding elements original position. To solve this problem we use margin on mouse hover as our need. In this example below we use margin 10px and border 1px. On mouse hover we use border 5px. So border value increases from 1px to 5px. When we run this code and move the mouse over the li element then we see it disturbs the surrounding elements original position. To solve this problem we decrease the margin value from 10px to 6px. We increase border value 4px so we decrease the margin value 4px. This is the trick to solve this problem.


<!DOCTYPE html>
<html>
<head>
<title>How To Apply Border To An Element On Mouse Hover Without Affecting The Layout In CSS ?</title>
<style>

ul {
list-style: none;
}

ul li {
display: inline-block;
margin: 10px;
padding: 20px;
border: 1px solid #000;
}

ul li:hover {
margin: 6px;
border: 5px solid #000;
}

</style>
</head>
<body>

<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>

</body>
</html> code-box


Summary

In this post we learned how to apply border to an element on mouse hover without affecting the layout in CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post