@azerphoenix

Почему при hover смещается текст?

Здравствуйте!
Вопрос довольно простой и уверен, что не раз задавался здесь или на stack...
Как устранить проблему со смещением текста ссылки при :hover?
И почему это сказывается на изображении?
Как равномерно изменить этот текст при этом без смещения?
Ссылка на сайт - test19.md7.info
Скрин проблемной области - https://screenshots.firefox.com/7a2Tw9BCn1vQX1UZ/t...
Заранее спасибо!
Касательно самого кода:
html
<div class="header_image">
	<img src="/wp-content/themes/nyt/images/reporter.svg" alt="Стать колумнистом" height="90">
	<a class="columnist" data-initialtext="Стать колумнистом" href="#">Стать колумнистом</a>
</div>
javascript
// заменяем текст ссылки при наведении
  jQuery('.columnist').hover(
    function() {
        var $this = $(this); // caching $(this)
        $this.data('initialtext', $this.text());
        $this.text("Стать автором сейчас");
    },
    function() {
        var $this = $(this); // caching $(this)
        $this.text($this.data('initialtext'));
    }
  );
CSS
.header_image {
    text-align: center;
    float: right;
}
.header_wrapper img {
    width: 100%;
    height: 40px;
    margin-top: 20px;
}
.columnist {
    font-size: 14px;
    line-height: 1;
    color: #000;
    text-decoration: none;
    margin-top: -10px;
    display: block;
    padding: 5px;
}
.columnist:hover {
    background: rgba(0,0,0,0.8);
    color: #fff;
}
  • Вопрос задан
  • 415 просмотров
Решения вопроса 1
qork
@qork
{ background: #F00B42 }
Задать width для ссылки, например, 150px.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы