How to add border to an element on mouse hover using CSS ?
We have given a web page containing elements and the task is to add border to an element on mouse move over (hover) using CSS. When we add a border to an element on hovering the mouse, it affects the position of the other nearest element. To remove this problem, we can use the CSS margin property.
Example:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Add CSS Border on Mouse Hover without Pushing Content </title> <style> ul { padding: 0; list-style: none; } ul li { float: left; margin: 10px; } ul ul li { display: block; } ul li:hover { border: 5px solid green; overflow: hidden; } ul ul li:hover img { margin: -5px; } </style> </head> <body> <h2>GeeksForGeeks</h2> <h2> How to apply border to an element on mouse hover without affecting the layout in CSS? </h2> <ul> <li>Home</li> <li>news</li> <li>Images</li> <li>Music</li> </ul> </body> </html> |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera
.png)
