时间戳

首页 > 解决方案 > 悬停时问题链接文本抖动（改变大小/重量）

css - 悬停时问题链接文本抖动（改变大小/重量）

问题描述

第一次加载页面时，当我将鼠标指向链接时，它开始快速更改其大小和/或字体粗细几次（如摇晃），它的外观如下：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>

标签： css

解决方案

这是代码：

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

推荐阅读