Граница CSS hover делает встроенные элементы слегка настраиваемыми

У меня есть неупорядоченный список, полный или якорь. У меня есть событие CSS: Hover, которое добавляет к нему границы, но все привязки влево слегка корректируются, когда я наводил курсор, потому что он добавляет 1px к ширине и автоматической настройке. как я уверен, что позиционирование является абсолютным?

Я сделал JS Fiddle здесь.

ОТВЕТЫ

Ответ 1

Вы можете добавить прозрачную рамку к состоянию без зависания, чтобы избежать "прыгания" при появлении границы:

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

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

Ответ 2

Вы также можете использовать outline, который не будет влиять на ширину, то есть эффект "прыжок". Однако, к сожалению, вы не можете сделать схему округленной.

Ответ 3

Добавьте поле 1px и удалите это поле при наведении, поэтому оно заменяется рамкой.

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

Ответ 4

Вы можете использовать тень окна, а не границу для такого рода функций.

Это работает, потому что ваша тень не "принимает размер в DOM", и поэтому не влияет на позиционирование, в отличие от границы.

Попробуйте использовать объявление типа

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

вместо

border:1px solid #102447;

в вашем состоянии зависания.

Ниже приведена краткая демонстрация этого в действии:

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>

Ответ 5

Вы можете использовать рамку-тень, которая не меняет размер вашего окна, в отличие от границы.

Вот небольшой учебник.

Ответ 6

Просто добавьте следующий код в свой файл css

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

Ответ 7

Атрибут CSS "box-sizing" исправил эту проблему для меня. Если вы дадите свой элемент

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

Затем ширина рамки добавляется во внутреннюю часть поля, когда браузер вычисляет ее ширину. Таким образом, когда вы включаете и стираете стиль рамки, размер элемента не изменяется (что и вызывает дрожание, которое вы наблюдаете).

Это новая технология, но поддержка border-box довольно последовательна. Вот демон

Ответ 8

Добавьте отрицательный запас для зависания:

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

обновленная скрипка

В скрипте margin: -1px; немного сложнее, потому что был margin-right, который был переопределен, но это все еще просто вопрос вычитания вновь занятого пространства.

Ответ 9

Я тоже столкнулся с той же проблемой. Исправлено упоминание Уэсли Мерча! то есть добавление прозрачной границы вокруг элемента, который должен быть виден.

У меня была ul, на которой: hover был добавлен к каждому ли. Каждый раз, когда я наводил курсор на каждый элемент списка, элементы, содержащиеся внутри li, тоже перемещались.

Вот соответствующий код:

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

Наведите указатель мыши на каждый элемент списка:

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

}

Вышеприведенный код, используемый для смещения содержащихся элементов, всякий раз, когда я зависал над connectionListItem. Исправление было добавлено в css как:

.connectionsListItem
{
    border:1px solid transparent;
}

Ответ 10

Использование: до создания границы, таким образом, он не будет изменять фактический контент и дает вам больше свободы. Проверьте это здесь: 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;  
    }
  }
}

Ответ 11

После долгого давления я нашел прохладный раствор. Надеюсь, что это поможет другим.

добавить следующий код:

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 traparent;
}
.border-test:hover {
  outline: 0px solid traparent;
  border: 5px solid red;
}

Проверить в прямом эфире: Live Demo

Надеюсь, это поможет.