Question

当我将鼠标悬停在标题上的按钮上时，它们会变大，但我希望它们保持相同的大小。我怎样才能做到这一点？标题按钮上没有很多教程，所以我问你们。 Roboto字体：http://www.dafont.com/roboto.font

的index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>--snipped--</title>
    <link href="./css/styles.css" rel="stylesheet">
</head>
<style>
    @font-face{
        font-family: "RobotoLight";
        src: url('font/Roboto-Light.ttf'),
        url('font/Roboto-Light.ttf');
    }

</style>
<body>
    <header>
        <div>
            <h1><img src="./pictures/logo.png"></h1>
            <ul>
                <li style="font-family: RobotoLight;"><a href="#">--snipped--</a></li>
                <li style="font-family: RobotoLight;"><a href="#">--snipped--</a></li>
                <li style="font-family: RobotoLight;"><a href="#">--snipped--</a></li>
                <li style="font-family: RobotoLight;"><a href="#">--snipped--</a></li>
            </ul>
        </div>
    </header>
    <main>
        <!--<video autoplay loop id="vid">
            <source src="./videos/background.mp4" type="video/webm">
        </video> -->       
    </main> 
</body>

styles.css

    body { 
    margin: 0; 
    padding: 0; 
} 

header div, main { 
    max-width: 100%; 
    padding: 0 1em 0 1em;   
} 


header { 
    background: #d000c2; 
    width: 100%; 
    height: 40px;
    -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
    -moz-box-shadow:    0px 3px 5px rgba(100, 100, 100, 0.49);
    box-shadow:         0px 3px 5px rgba(100, 100, 100, 0.49);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

header h1 { 
    position: absolute;
    left: 17;
    margin:0;
    margin-top: 10;
} 

main { 
    padding: 21; 
} 

header a { 
    margin-top: -14px;
    text-decoration: none; 
    color: white; 
} 

header li {
    text-transform: uppercase;
    display: inline; 
    right: 14;
    font-family: Helvetica;
    font-size: 24px;
    padding: 4px
}

header a:hover {
    border-top: 1px cyan;
    border-style: solid;
    border-bottom: 0px white;
    border-right: 0px white;
    border-left: 0px white;
    padding: 5px;
    background-color: #C100B5;
 }

header li a:hover { 
    color: cyan;
} 

header ul { 
    float: right; 
    list-style-type: none; 
} 

#vid{
            position:fixed;
            right:0;
            bottom:0;
            min-width:100%;
            min-height:100%;
            background-size:cover;
            z-index: -1;
            }

#contact{
    font-family: Helvetica;
    font-size: 20;
    color: white;
}

main a:hover{
    color: white;
    text-decoration: none;
}

main a:link{
    color: white;
    text-decoration: none;
}

main a:visited{
    color: white;
    text-decoration: none;
}

@media only screen and (max-width: 520px) { 
    header { 
        text-align: center;
        position: relative; 
    } 
    main { 
        padding: 14 px; 
        } 
    header h1 { 
        float: none; 
        margin: 0; 
    } 
    header ul { 
        float: none; 
        margin: 0;
    } 
}

Answer 1

如果您不注意在:hover状态下设置的CSS，则会出现错误。

错误是你的<li></li>

的基本状态有这个css

header a { 
    margin-top: -14px;
    text-decoration: none; 
    color: white;
}

这一个hover的{{1}}状态：

<li></li>

如果你可以对他们做一些数学计算，你会发现在header a:hover { border-top: 1px cyan; border-style: solid; border-bottom: 0px white; border-right: 0px white; border-left: 0px white; padding: 5px; background-color: #C100B5; }州，你有一个aditionnal hover和padding : 5px。

为了解决这个问题，我在元素的基本状态上添加了透明border-top 和与{{1>上使用的 padding 相同的 padding 国家。

您可以在此JSFiddle链接上找到结果。

Answer 2

这不是字体的问题。在悬停时删除padding a tag，它不会更大：

header a:hover {
    border-top: 1px cyan;
    border-style: solid;
    border-bottom: 0px white;
    border-right: 0px white;
    border-left: 0px white;
    padding: 5px; /* remove this padding */
    background-color: #C100B5;
 }

当您将鼠标悬停在它们上方时，标题按钮会变大

2 个答案: