Ссылки перемещаются вправо на Hover в CSS?

Question

Ссылки перемещаются вправо на Hover в CSS?

0

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

Мой навигационный CSS

.logo-wrapper {
  padding-bottom: 85px;
  background-color: #2e3639;

}

.logo-items{
  display: inline-block;
  position: relative;
  color: white;
  font: "Times New Roman";
  float: left;
  margin-left: 500px;
  margin-top: 30px;
  text-decoration: none;

}

.logo-items a{
  text-decoration: none;
  color: white;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom:solid 1px transparent;
}

.logo-items a:hover {
  background-color: #61696c;
  padding: 4px 4px 4px 4px;
  border-radius: 10px;
}

.logo-items span {
  margin-right: 10px;
}

Моя навигационная система

<div class="logo-wrapper">
                <div class="logo-items">
                  <span>Logo</span>
                  <span>
                   <%= link_to "Tags", tags_path %>
                  </span>
                  <span>Pages</span>

                </div>
          </div>

ajkumar25 02 окт. 2013, в 17:06

Источник

3

Ну ... у вас есть правило padding для ваших .logo-items a:hover selector. Вы хотели поставить это на селектор без :hover ?
ajp15243 02 окт. 2013, в 14:20
0

Вы должны положить padding: 4px; (достаточно только одного значения, потому что все значения одинаковы) для .logo-items a .
Harry 02 окт. 2013, в 14:23
0

Пожалуйста, напишите скрипку, это поможет отследить реальную проблему. И почему вы помещаете 'padding:' в ': hover' css?
Ishan Jain 02 окт. 2013, в 14:23
0

Я добавил padding в: hover, потому что при наведении курсора он должен обеспечивать некоторое пространство со всех сторон текста, а не просто обтекать текст одним, а затем граничить радиус с закруглением углов.
ajknzhol 02 окт. 2013, в 14:26

Показать ещё 2 комментария

Теги:

html

css

4 ответа

2

Попробуйте сделать это: -

Добавить " padding: 4px 4px 4px 4px; " in " .logo-items a{ " тоже... Пожалуйста, просмотрите обновленный код: -

.logo-items a {
    text-decoration: none;
    color: white;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom:solid 1px transparent;
    padding: 4px 4px 4px 4px;
}

Обратитесь к скрипту: - http://jsfiddle.net/eETN8/

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

UID 02 окт. 2013, в 13:21

1

Либо удалите padding на .logo-items a:hover или добавить те же padding для .logo-items a.

padding: 4px 4px 4px 4px - сокращение CSS для установки 4px padding (пробел между краем элемента и его содержимым), но оно применяется только к состоянию hover, так что это вызывает движение нескольких пикселей, о которых вы говорите,

Кроме того, padding: 4px 4px 4px 4px; может быть сокращено до padding: 4px; поскольку они - одно и то же. Я предполагаю, что вы добавили отступы, чтобы изменить цвет фона при наведении, выглядите лучше, поэтому просто добавьте padding: 4px в .logo-items a и вы хорошо пойдете!

Ennui 02 окт. 2013, в 13:04

0

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

mxdi9i7 09 окт. 2016, в 12:18

Ещё вопросы

Ну ... у вас есть правило padding для ваших .logo-items a:hover selector. Вы хотели поставить это на селектор без :hover ?
Вы должны положить padding: 4px; (достаточно только одного значения, потому что все значения одинаковы) для .logo-items a .
Пожалуйста, напишите скрипку, это поможет отследить реальную проблему. И почему вы помещаете 'padding:' в ': hover' css?
Я добавил padding в: hover, потому что при наведении курсора он должен обеспечивать некоторое пространство со всех сторон текста, а не просто обтекать текст одним, а затем граничить радиус с закруглением углов.

Dominic Green · Accepted Answer · 2013-10-02T11-51-00.000Z

Эй, вы получаете это, потому что вы добавили дополнение к вашему: hover, чтобы получить серый эффект фона.

.logo-items a:hover {
  background-color: #61696c;
  padding: 4px 4px 4px 4px;
  border-radius: 10px;
}

Быстрый способ остановить прыжок - это добавить дополнение к вашей ссылке в первую очередь, так что ширина всегда одинакова

.logo-items a{
  text-decoration: none;
  color: white;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom:solid 1px transparent;
  padding:4px;
}

Здесь я добавил скрипку http://jsfiddle.net/domjgreen/uNKm8/