2011-12-24 16 views
41

Tengo una lista desordenada completa o anclas. Tengo un evento CSS: Hover que agrega bordes a él, pero todos los anclajes a la izquierda se ajustan ligeramente cuando activo, porque agrega 1px al ancho y el ajuste automático. ¿Cómo me aseguro de que el posicionamiento sea absoluto?El borde deslizante de CSS hace que los elementos en línea se ajusten ligeramente

He hecho un JS Fiddle here.

+3

recuento de las fronteras de cálculos de tamaño, por lo que si se añade un borde de 1 píxel, usted tiene que reducir la altura/anchura de 1 píxel para compensar. –

Respuesta

7

Agregue un margen de 1px y elimine ese margen al pasar el mouse, por lo que se reemplaza por el borde.

http://jsfiddle.net/TEUhM/4/

+0

agradable, gracias. ¡Tenía miedo de que tuviera que usar js :)! – user1082764

+0

Afortunadamente eso casi nunca es necesario. Y te conviene que trates de no hacerlo. :) – GolezTrol

72

Usted puede agregar un borde transparente para el estado no estacionario para evitar el "nerviosismo" cuando aparezca la frontera:

http://jsfiddle.net/TEUhM/3/

#homeheader a:visited, #homeheader a{ 
    border:1px solid transparent; 
} 
+3

+1 a la mejor respuesta – brenjt

+0

Me encontré con esto por accidente y me sorprendió que nadie hubiera incluido background-clip: padding-box; con el borde: 1px sólido transparente; css. Parece una necesidad para mí incluir ambas entradas al abordar este problema. – Borgboy

+0

FYI: (en caso de que alguien tenga el mismo problema), agregar un fondo transparente se comportó de manera diferente en mis pastillas de navegación bootstrap (donde la pastilla de navegación activa tiene un color de fuente y color de fuente diferente). Usar rgba funcionó para mí: 'border: 1px solid rgba (0, 0, 0, 0);' donde el último 0 es para transparencia. – Anupam

12

También puede utilizar outline, que no afectará el ancho, es decir, no tendrá efecto de "salto". Sin embargo, desafortunadamente, no se puede redondear el contorno.

0

Yo también estaba enfrentando el mismo problema. ¡La solución mencionada por Wesley Murch funciona! es decir, agregar un borde transparente alrededor del elemento que se va a suspender.

Tuve un ul en el que: se agregó el control deslizante a cada li. Cada vez, me movía en cada elemento de la lista, los elementos contenidos dentro de li también se movían.

Este es el código correspondiente:

html

<ul>   
    <li class="connectionsListItem" id="connectionsListItem-0">  
     <div class="listItemContentDiv" id="listItemContentDiv-0"> 
      <span class="connectionIconSpan"></span> 
      <div class="connectListAnchorDiv"> 
      <a href="../test/1.html" class="homeConnectionListanchor" id="leftTabConnectionListAnchor-0">Test1</a> 
      </div> 
     </div> 
    </li> 
</ul> 

css

.listItemContentDiv 
{ 
    display: inline-block; 
    padding: 8px; 
    right: 0; 
    text-align: left; 
    text-decoration: none; 
    text-indent: 0; 
} 

.connectionIconSpan 
{ 
    background-image: url("../images/connection4.png"); 
    background-position: 100% 50%; 
    background-repeat: no-repeat; 
    cursor: pointer; 
    padding-right: 0; 
    background-color: transparent; 
    border: medium none; 
    clear: both; 
    float: left; 
    height: 32px; 
    width: 32px; 
} 

.connectListAnchorDiv 
{ 
    float: right; 
    margin-top: 4px; 
} 

El defn vuelo estacionario en cada elemento de la lista:

.connectionsListItem:hover 
{ 
    background-color: #F0F0F0; 
    background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7); 
    box-shadow: none; 
    text-shadow: none; 
    border-radius: 10px 10px 10px 10px; 
    border-color: #AAAAAA; 
    border-style: solid; 

} 

El código anterior se utiliza para hacer el cont Los elementos de aining cambian, siempre que pase el mouse sobre connectionsListItem. La solución era esto, añadido a la css como:

.connectionsListItem 
{ 
    border:1px solid transparent; 
} 
2

El CSS "box-sizing" attribute fijado este problema para mí. Si indica su elemento

.class-name { 
    box-sizing: border-box; 
} 

A continuación, se añade el ancho del borde de la dentro de la caja cuando el navegador calcula su anchura. De esta forma, cuando enciende y apaga el estilo del borde, el tamaño del elemento no cambia (que es lo que causa el nerviosismo que observó).

Esta es una tecnología nueva, pero compatible con el cuadro is pretty consistent. ¡Aquí hay un demo!

+1

esta es, de lejos, la solución más elegante. –

7

Puede usar una sombra de cuadro, en lugar de un borde para este tipo de funcionalidad.

Esto funciona porque su sombra no "toma tamaño en el DOM", por lo que no afectará el posicionamiento, a diferencia de un borde.

Trate de usar una declaración como

box-shadow:0 0 1px 1px #102447; 

en lugar de su

border:1px solid #102447; 

de su estado estacionario.

continuación se presenta una breve demostración de esto en acción:

DEMO

#homeheader a:visited, 
 
#homeheader a { 
 
    text-decoration: none; 
 
    color: black; 
 
    margin-right: 5px; 
 
} 
 
#homeheader a:hover { 
 
    background-color: #D0DDF2; 
 
    border-radius: 5px; 
 
    box-shadow: 0 0 1px #102447; 
 
} 
 
#homeheader li { 
 
    padding: 0; 
 
    margin: 0px 10px; 
 
    display: inline; 
 
    font-size: 1em; 
 
}
<div id="homecontainer"> 
 
    <div id="homeheader"> 
 
    <ul> 
 
     <li><a href="#">this</a> 
 
     </li> 
 
     <li><a href="#">that</a> 
 
     </li> 
 
     <li><a href="#">this again</a> 
 
     </li> 
 
     <li><a href="#">that again</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

1

añadir un margen negativo en vuelo estacionario para compensar:

#homeheader a:hover{ 
    border: 1px solid #102447; 
    margin: -1px; 
} 

updated fiddle

En el violín el margin: -1px; es un poco más complejo porque se superó un margin-right, pero aún así es solo cuestión de restar el espacio recién ocupado.

0

Uso: antes de crear el borde, de esa manera no modificará el contenido real y le dará más libertad. Échale un vistazo aquí: http://codepen.io/jorgenrique/pen/JGqOMb

<div class='border'>Border</div> 
<div class='before'>Before</div> 
div{ 
    width:300px; 
    height:100px; 
    text-align:center; 
    margin:1rem; 
    position:relative; 
    display:flex; 
    justify-content:center; 
    align-items: center; 
    background-color:#eee; 
} 
.border{ 
    border-left:10px solid deepPink; 
} 
.before{ 
    &:before{ 
    content:""; 
    position:absolute; 
    background-color:deepPink; 
    width:10px; 
    height:100%; 
    left:0; 
    top:0; 
    } 
    &:hover{ 
    background-color:#ccc; 
    &:before{ 
     width:0px; 
     transition:0.2s; 
    } 
    } 
} 
2

Apenas añada el siguiente código en su archivo css

#homeheader a { 
    border:1px solid transparent; 
} 
0

Después de tomar una presión desde hace mucho tiempo he encontrado una solución fresca. Espero que ayude a otros.

en el folloing añadir el código:

HTML

<div class="border-test"> 
    <h2> title </h2> 
    <p> Technology founders churn rate niche market </p> 
</div> 

CSS

Comprobar vivo: Live Demo

Espero que ayude.

0

Nadie ha mencionado aquí, pero la mejor y solución más simple a esto en mi opinión es el uso de "caja de sombra" en lugar de las fronteras. La magia está en el valor de "inserción" que le permite ser como un huésped.

box-shadow: inset 0 -3px 0 0 red; 

Puede compensar la X o la Y para cambiar la parte superior/inferior y utilizar el valor negativo para lados opuestos.

.button { 
 
    width: 200px; 
 
    height: 50px; 
 
    padding: auto; 
 
    background-color: grey; 
 
    text-align: center; 
 
} 
 

 
.button:hover { 
 
    box-shadow: inset 0 -3px 0 0 red; 
 
    background-color: lightgrey; 
 
}
<div class="button"> Button </div>

Cuestiones relacionadas