为什么我的主动李比悬停李更大?

问题描述 投票:0回答:3

我正在使用Bootstrap 4并创建了一个简单的导航栏(here is the CodePen)。我的活跃的li看起来像我喜欢的方形橙色背景。然而,当我将鼠标悬停在其他li上时,:悬停的那些并不高。

我希望悬停像活跃的橙色和相同的大小。我已经使用检查员试图找出尺寸来自哪里,但找不到任何改变它的东西。我该如何解决这个问题?

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;
}
css twitter-bootstrap bootstrap-4
3个回答
2
投票

从你的CSS代码

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

你将背景色设置为nav-link的橙色,这是anchor标签

虽然这一行

.active {
    background-color: orange;
}

设置li标签的背景颜色


0
投票

您可以通过删除来解决此问题

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

0
投票

这是因为这段代码

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

它将.5 rem的填充设置为块。 在悬停到元素本身时设置您的更改值。有关其他问题,请尝试阅读您正在使用的css库的代码。

© www.soinside.com 2019 - 2024. All rights reserved.