css - lista - etiquetas html

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

Question

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?

Hice un JS Fiddle here .

Answer 1

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

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

Answer 2

Agregue un margen negativo en el vuelo estacionario para compensar:

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

violín actualizado

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

Answer 3

Después de tomar una presión prolongada, encontré una solución genial. Espero que ayude a otros.

en el agregar el siguiente código:

HTML

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

CSS

.border-test {
  outline: 1px solid red;
  border: 5px solid transparent;
}
.border-test:hover {
  outline: 0px solid transparent;
  border: 5px solid red;
}

Ver en vivo: demostración en vivo

Espero que ayude

Answer 4

El atributo CSS "tamaño de caja" me solucionó este problema. Si le das tu elemento

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

Luego, el ancho del borde se agrega al interior del cuadro cuando el navegador calcula su ancho. 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 nueva tecnología, pero el soporte para border-box es bastante consistente . ¡Aquí hay una demo !

Answer 5

El método más fácil que encontré fue usar ''outline'' en lugar de ''border''.

#home:hover{
outline:1px solid white;
}

en lugar de

#home:hover{
border:1px solid white;
}

Funciona mejor!

https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm

Answer 6

Nadie lo mencionó aquí, pero la mejor y más simple solución para esto en mi opinión es usar "sombra de caja" en lugar de bordes. 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 usar 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>

Answer 7

Puede agregar un borde transparente al estado sin desplazamiento para evitar el "salto" cuando aparece el borde:

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

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

Answer 8

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

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

Intenta usar una declaración como

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

en lugar de tu

border:1px solid #102447;

en su estado de vuelo estacionario

A continuación se muestra una demostración rápida de esto en acción:

MANIFESTACIÓN

#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>

Answer 9

Puedes usar la sombra de caja que no cambia el tamaño de tu casilla, a diferencia de los bordes.

Aquí hay un pequeño tutorial.

Answer 10

Simplemente agregue el siguiente código en su archivo css

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

Answer 11

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

Answer 12

Use: antes para crear el borde, de esa manera no modificará el contenido real y le dará más libertad. Compruébelo 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;  
    }
  }
}

Answer 13

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 elemento emergente 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.

Aquí está el código relevante:

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;
}

La definición hover 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 utilizado para hacer que los elementos que contienen cambien, siempre que pase el mouse sobre connectionsListItem. La solución fue agregada al CSS como:

.connectionsListItem
{
    border:1px solid transparent;
}