texto - hover en css

Agregue un borde CSS al pasar el mouse sin mover el elemento

Question

Posible duplicado:
El borde desplegable de CSS hace que los elementos en línea se ajusten un poco

Tengo una fila en la que estoy aplicando un resaltado de fondo para activar el vuelo estacionario.

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

Sin embargo, como el borde agrega 1px adicional al elemento, lo hace ''mover''. ¿Cómo compensaré el movimiento anterior aquí (sin usar una imagen de fondo)?

Answer 1

Agregue un border al elemento normal, del mismo color que el background , para que no pueda verse. De esta manera, el elemento tiene un border: 1px si está siendo suspendido o no.

Answer 2

Intenta esto, podría resolver tu 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>

Ver violín para la salida: http://jsfiddle.net/dLDNA/

Answer 3

Puede hacer que el borde sea transparente. De esta manera existe, pero es invisible, por lo que no empuja nada a su alrededor:

.jobs .item {
    background: #eee;
    border-top: 1px solid transparent;
}

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

Si sus elementos tienen una height y / o width especificados, también puede usar box-sizing:border-box; , ya que este modelo de caja incluye anchos de relleno y de borde en el tamaño calculado, por ejemplo:

.jobs .item {
    background: #eee;
    height: 40px;
    box-sizing: border-box;
}

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

Answer 4

agregar margin:-1px; que reduce 1px a cada lado. o si solo necesita un lado puede hacer margin-left:-1px etc.