Hemos dado una página web que contiene elementos y la tarea es agregar un borde a un elemento al mover el mouse (pasar el mouse) usando CSS. Cuando agregamos un borde a un elemento al pasar el mouse, afecta la posición del otro elemento más cercano. Para eliminar este problema, podemos usar la propiedad de margen CSS .
Ejemplo:
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>
Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA