在引导程序中更改 CSS 中的悬停大小答案

【问题标题】：Change hover size in css in bootstrap在引导程序中更改 CSS 中的悬停大小
【发布时间】：2023-03-30 05:54:02
【问题描述】：

我有一个导航栏，我想知道是否可以在 bootstrap 4 中更改悬停大小？我想让菜单链接上的背景尺寸变小。我试过这种方法：How do i change the width of the hover in bs4，但它对我不起作用。

这是我的html：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Cuppela</title>
    <script src="https://www.cuppela.com/cuppela/js/jquery.min.js" type="text/javascript"></script>
    <script src="https://www.cuppela.com/cuppela/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://www.cuppela.com/cuppela/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/test.css" type="text/css">

</head>
<body>
    <div id="nav-menu">
        <nav id="main-nav" class="navbar navbar-expand-md fixed-top">
            <div class="container">
                <ul class="nav navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Shop</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
        </div>
<div class="container-fluid" id="top-main"> 

    <div id="top_text">
        <h1>Cuppela Made With Sugar</h1>
        <p>Delicious Homemade Cakes</p>
    </div>
    
    </div>
</div>

<div>
    <h2>Test</h2>
</div>
</body>
</html>

这是我的 CSS：

body{
    margin: 0px;
}

li a:hover {
    background-color: #ff9900;
    border-radius: 10px;
}

li a{
    color: white !important;
}

#top-main{
    background-image: url(../images/cake_six_two.jpg);
    height: 100vh;
}

#nav-menu{
    font-size: x-large;
    position: relative;
}

#top_text{
    color: white;
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

h1{
    font-size: 500%;
}

p{
    font-size: x-large;
}

h2{
    text-align: center;
}

编辑：添加更多描述。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

我想当你 :hover 时你想改变菜单链接背景的大小。如果是这种情况，请编辑 .nav-link 的填充（或完全删除填充线），您将得到如下结果：

正如您所见，没有任何填充会让人觉得链接上方的背景比下方的橙色背景要多一些。这是 CSS 中填充的常见怪癖，因此我建议您添加例如 padding: 0 0 .2rem，它转换为顶部、右侧和左侧的零填充，以及元素底部的 0.2rem 填充。

结果将是：

【讨论】：

【解决方案2】：

你没有明确提到你想要什么，但如果你想改变字体大小，你可以简单地做font-size: 12px或任何你想要的像素。如果要更改锚标记的宽度，则可以减少填充，例如 .navbar .navbar-nav .nav-item .nav-link { padding: 5px // or anything you want, you can also make it 0 }

【讨论】：