убрать отступ при наведении на ссылки?

239

15 февраля 2018, 13:37

при наведении на элемент делаю бордер.но начинается дискотека.

как убрать эти танцы диско?

li:hover{
    padding:-2px;
border:1px solid;
}

Answer 1

Граница влияет на размеры блока. Можно в обычном состоянии задавать прозрачную границу, а при наведении просто менять её цвет, либо использовать outline

h5{ 
  margin:0; 
} 
ul{ 
  padding:0; 
  list-style-type:none; 
} 
li{ 
  display:inline-block; 
  padding:10px; 
  border:2px solid transparent; 
} 
li:hover{ 
  border-color:red; 
} 
.without li, 
.outline li{ 
  border:none; 
} 
.without li:hover{ 
  border:2px solid red; 
} 
.outline li:hover{ 
  outline:2px solid red; 
}

<h5>C предустановленной границей</h5> 
<ul> 
  <li>asdasdasdasd</li> 
  <li>asdasdasdasd</li> 
  <li>asdasdasdasd</li> 
</ul> 
<h5>Без предустановленной границы</h5> 
<ul class="without"> 
  <li>asdasdasdasd</li> 
  <li>asdasdasdasd</li> 
  <li>asdasdasdasd</li> 
</ul> 
<h5> C outline</h5> 
<ul class="outline"> 
  <li>asdasdasdasd</li> 
  <li>asdasdasdasd</li> 
  <li>asdasdasdasd</li> 
</ul>