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

Я настраиваю навигационные ссылки, и когда я наводил курсор на ссылку, он меняет цвет, но он перемещает несколько пикселей с правой стороны и снова становится нормальным, когда курсор удаляется от зависания.Ссылки Перемещение вправо на Hover в CSS?

Мои навигации 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>

источник

2013-10-02 ajkumar25

Ну ... у вас есть правило 'padding' на ваших' .logo-items a: hover' Сел т е р. Вы хотели поставить это на селектор без ': hover'? – ajp15243

Вы должны положить 'padding: 4px;' (просто одно значение достаточно, потому что все одинаковые значения) в '.logo-items a' также. – Harry

Пожалуйста, напишите скрипку, Это поможет отследить реальную проблему. И почему вы положили 'padding:' в ': hover' css? –

Эй, вы получаете это, потому что вы добавили дополнение к вашему: 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; 
}

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

источник

2013-10-02 14:25:21

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

Добавить "padding: 4px 4px 4px 4px;" в ".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/

Надеется, что это помогает!

источник

2013-10-02 14:24:36 UID

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

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

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

источник

2013-10-02 14:24:51 Ennui

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

источник

2016-10-09 14:21:57

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

ответ

Смежные вопросы