Question

我正在使用Bootstrap 4，并创建了一个简单的导航栏（here is the CodePen）。我的活跃李看起来像我喜欢的方形橙色背景。但是，当我将鼠标悬停在其他li上时，：hover并没有那么高。

我希望悬停就像活动的橙色和相同的大小。我已经使用检查器来尝试确定尺寸的来源，但是找不到任何可以改变尺寸的东西。我该如何解决？

HTML

    <header>
        <!-- Navigation -->
        <nav class="navbar navbar-expand-lg navbar-custom">

            <div class="container">

                <a class="navbar-brand" href="#"><img src="https://s3.amazonaws.com/listing-naples/assets/listing-naples-logo.png" alt="Listing Naples Team Logo"></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Properties</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Property</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Agents</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Agencies</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">News</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pages</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control-sm mr-sm-2 custom-input-sm" type="search" placeholder="MLS Number" aria-label="Search">
                    </form>
                </div><!-- end collapse navbar-collapse div-->

            </div><!-- end container div -->

        </nav>

    </header>

CSS

body {
    font-family: 'Source Sans Pro', sans-serif;
}
.navbar-custom {
    background-color:#000;
    padding: 1.5rem;
}

header li {
    padding: .5rem;
    margin:0;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.5);
    font-weight:400;
    font-size: 1rem;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: white;
    background-color: orange;
}

.active {
    background-color: orange;
}

Answer 1

通过您的CSS代码

.navbar-custom .nav-item:hover .nav-link

您正在将nav-link标签的anchor的背景色设置为橙色

此行

.active {
    background-color: orange;
}

设置li标签的背景颜色

Answer 2

您可以通过删除

来解决此问题

.active {
    background-color: orange;
}

这会将其添加到a元素

.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: white;
    background-color: orange;
}

这会将其添加到li元素

.active {
    background-color: orange;
}

Answer 3

因为有此代码

header li {
padding: .5rem;
margin: 0;
}

正在将.5 rem的填充设置为该块。
将悬停时更改的值设置为元素本身。对于其他问题，请尝试阅读您所使用的CSS库的代码。

为什么我的活跃李比悬浮李大？

3 个答案: