Agregue un borde CSS al pasar el mouse sin mover el elemento [duplicado]
Tengo una fila a la que le estoy aplicando un resaltado de fondo al pasar el mouse.
.jobs .item:hover {
background: #e1e1e1;
border-top: 1px solid #d0d0d0;
}
Sin embargo, como el borde agrega 1 px adicional al elemento, lo hace "moverse". ¿Cómo compensaría aquí el movimiento anterior (sin utilizar una imagen de fondo)?
Puedes hacer que el borde sea transparente. De esta manera existe, pero es invisible, por lo que no empuja nada:
.jobs .item {
background: #eee;
border: 1px solid transparent;
}
.jobs .item:hover {
background: #e1e1e1;
border: 1px solid #d0d0d0;
}<div class="jobs">
<div class="item">Item</div>
</div>Para elementos que ya tienen un borde y no quieres que se muevan, puedes usar márgenes negativos:
.jobs .item {
background: #eee;
border: 1px solid #d0d0d0;
}
.jobs .item:hover {
background: #e1e1e1;
border: 3px solid #d0d0d0;
margin: -2px;
}<div class="jobs">
<div class="item">Item</div>
</div>Otro posible truco para agregar ancho a un borde existente es agregar un box-shadowatributo de extensión del ancho de píxel deseado.
.jobs .item {
background: #eee;
border: 1px solid #d0d0d0;
}
.jobs .item:hover {
background: #e1e1e1;
box-shadow: 0 0 0 2px #d0d0d0;
}<div class="jobs">
<div class="item">Item</div>
</div>
agregue margin:-1px;lo que reduce 1pxa cada lado. o si solo necesitas un lado, puedes hacerlo, margin-left:-1pxetc.
Pruebe esto, podría resolver su problema.
CSS:
.item{padding-top:1px;}
.jobs .item:hover {
background: #e1e1e1;
border-top: 1px solid #d0d0d0;
padding-top:0;
}
HTML:
<div class="jobs">
<div class="item">
content goes here
</div>
</div>
Consulte el violín para ver el resultado: http://jsfiddle.net/dLDNA/
Agregue un borderal elemento normal, igual colorque background, para que no se pueda ver. De esa manera, el elemento tiene información border: 1pxsobre si se está desplazando o no.
