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

Question

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

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

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

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

Answer 1

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

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

Answer 3

Одна из причин, по которой это не работает так, как вы ожидаете, заключается в том, что вы применяете display:block только к :hover, его нужно применить к элементу без селектора: 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;
}

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

Answer 7

Настройка границы цвета: прозрачная; делает работу.

a {
  border-color : transparent ;
}

a:hover {
   border-color : black;
}