Проблема с дрожанием текста ссылки (изменение размера / веса) при наведении - PullRequest
Новая
       0

Проблема с дрожанием текста ссылки (изменение размера / веса) при наведении

0 голосов
/ 17 марта 2020

Когда страница в первый раз загружается, когда я наводю указатель мыши на ссылку, она начинает быстро менять свой размер и / или вес шрифта несколько раз (например, при встряхивании), как это выглядит здесь: https://youtu.be/kaEapSLiHAQ . Я подумал, что это мой браузер (использующий Waterfox), но то же самое происходит и в Chrome. Я использую VS Code с плагином Live Server, так что это может быть ошибка Live Server? Может ли это быть причиной перехода? Если да, то как мне это исправить? 

.header {
    display       : flex;
    flex-direction: column;
    align-items   : center;
}


.top-menu {
    display        : flex;
    list-style-type: none;
    border-bottom  : 1px solid rgba(0, 0, 0, .3);
}


.top-menu a {
    text-decoration: none;
    color          : #113453;
    padding        : 1em 1em .5em 1em;
    display        : block;
    transition     : color .5s;
    transition     : font-weight 1s;
    font-family    : 'Cormorant Unicase', serif;
    font-weight    : 300;
    margin         : 0 .1em;
    position       : relative;
    
}

.top-menu a:hover {
    color      : #404435;
    font-weight: 700;

}
<body class="page-content">
    <header>
        <nav class="header">
            
            <ul class="top-menu">
                <li><a href="#">О студии</a></li>
                <li><a href="#">Услуги</a></li>
                <li><a href="#">Вопрос-ответ</a></li>
            </ul>
        </nav>
    </header>
</body>

1 Ответ

0 голосов
/ 17 марта 2020

вот код: 

.header {
    display       : flex;
    flex-direction: column;
    align-items   : center;
}
.top-menu {
    display        : flex;
    list-style-type: none;
    border-bottom  : 1px solid rgba(0, 0, 0, .3);
}
.top-menu li {
    display: inline-block;
    font-size: 0;
}
.top-menu li a {
    text-decoration: none;
    color: #113453;
    padding: 1em 1em .5em 1em;
    display:block;
    transition : color .5s;
    transition : font-weight 1s;
    text-align:center;
    font-family: 'Cormorant Unicase', serif;
    font-size: 16px;
    font-weight : 300;
    margin: 0 .1em;
    position: relative;
}
.top-menu li a:hover {
    color : #404435;
    font-weight:700;
}
.top-menu li a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
<body class="page-content">
    <header>
        <nav class="header">
            
            <ul class="top-menu">
                <li><a href="#" title="О студии">О студии</a></li>
                <li><a href="#" title="Услуги">Услуги</a></li>
                <li><a href="#" title="Вопрос-ответ">Вопрос-ответ</a></li>
            </ul>
        </nav>
    </header>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...