Можете ли вы сделать "невидимую границу"?

Я пытаюсь сделать navbar в качестве упражнения.

Я использую a:hover, чтобы включить сплошную рамку вокруг зависающей кнопки. Однако это заставляет все остальные кнопки перемещаться по размеру границы.

Какое правильное решение этой проблемы? Я знаю, что есть другие (обсуждаемый здесь), я специально попытался сделать границу "невидимой, но занимать место даже тогда, когда не зависает". Я установил border:transparent, надеясь, что это может сделать то, что я хочу, но оно не показало пробела вообще.

Я знаю, что могу выделить цвет границы, чтобы он был равен фону и сделать его сплошным, но это не то, что я хочу. Есть ли разумный способ решить эту проблему?

Ответ 1

Как насчет border: 10px solid transparent?

Ответ 2

Ваш лучший вариант - добавить к вашему элементу дополнительные поля или поля, которые будут иметь тот же размер, что и граница, и сделать границу нулевой шириной, а затем показать границу и удалить дополнение с помощью селектора a:hover.

Вот пример. Вы можете часто делать это с полями.

a {
    display: inline-block;
    height: 2em; width: 100px;
    padding: 2px;
    background: #0ff;
}

a:hover {
    padding: 0;
    border :2px solid #000;
}

<a href="#">Hello World</a>

Ответ 3

Одна из причин, по которой это не работает, как вы ожидали, заключается в том, что вы применяете только display:block в :hover, ее необходимо применять к элементу без селектора: или, вы получите "переключение", Габаритные размеры. Неважно, какой тип отображения вы используете, вам просто нужно убедиться, что они одинаковы, и по умолчанию <a> является встроенным.

Другая причина имеет какое-то отношение к вашим сокращенным границам, вам нужно добавить тип границы для прозрачной версии, например solid, а не none.

Используемая вами техника абсолютно легальна, не требует дополнительных хаков или контуров (что не добавляет размерности).

http://jsfiddle.net/Madmartigan/kwdDB/

Попробуйте следующее:

#wd-navbar li a {
     border: medium solid transparent;
     display: block;
     margin: 1px;
}

#wd-navbar li a:hover {
     background-color: #F5DEB3;
     border: medium solid;
}

Ответ 4

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

Однако у этого есть некоторые проблемы, не поддерживается IE 7 или более ранними версиями.

Ответ 5

border:transparent означает border: transparent 0 none

Если вы не укажете свойство при использовании сокращенного синтаксиса, вы reset все свойства по умолчанию.

Вам нужно указать стиль границы и ширину рамки.

Ответ 6

Настройка border-color: transparent; выполняет эту работу.

a {
  border-color : transparent ;
}

a:hover {
   border-color : black;
}

Ответ 7

используйте псевдоэлементы ::after и ::before, чтобы закрыть невидимые границы.