Bootstrap 4导航链接悬停效果

Question

我试图在导航栏中只针对a链接实现悬停效果（而不是斜杠），但我似乎无法仅访问a链接，效果会在整个导航栏上运行。这里似乎与Bootstrap 4有冲突。

HTML：

 <nav class="navbar sticky-top navbar-expand-md navbar-light bg-light">
            <!-- <div class="mx-auto d-sm-flex d-block flex-sm-nowrap"> -->
            <a class="navbar-brand" href="https://www.facebook.com/GetMove.Official/">GET MOVE</a>
            <button
                class="navbar-toggler mr-left custom-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home<span> / </span><span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#past-bookings">Archive<span> / </span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About<span> / </span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#subscribe">Newsletter<span> / </span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="mailto: [e-mail]">Contact</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav flex-row justify-content-center flex-nowrap">
                    <li class="nav-item">
                        <a
                            class="nav-link nav-social-icon"
                            target="_blank"
                            href="https://www.facebook.com/GetMove.Official/"
                            ><i class="fab fa-facebook-square"></i
                        ></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"
                            ><i class="fab fa-instagram"></i
                        ></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-social-icon" target="_blank" href="https://soundcloud.com/getmove"
                            ><i class="fab fa-soundcloud"></i
                        ></a>
                    </li>
                </ul>
            </div>
        </nav>

CSS

.nav-item:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.nav-item:hover:after {
    width: 100%;
}

在这里调试 https://codepen.io/pen/WNNPdxv

- octavemirbeau

---

.nav-item 是否具有 position:relative 属性？ - Paulie_D

首先，需要添加“.nav-item { position: relative }”进行调整。当使用“position: absolute”时，该元素将定位到最近具有设置位置的父元素。 - disinfor

谢谢！那差不多解决了。悬停效果现在针对a链接。有什么建议可以避免针对包含斜杠的span，这些span位于a链接内部？我也更新了fiddle。 - octavemirbeau

除非您将斜杠移动到.nav-item标签之外，否则您真的无法避免这种情况。当鼠标悬停在li项上时，您的下划线会出现。因此，如果您查看结构，您的斜杠就在该元素内部。您唯一能做的就是更改标记或使CSS仅使after元素的宽度小于100％，但这可能对所有链接都不起作用。 - disinfor

最终我将斜杠移出了nav-item标签。谢谢。 - octavemirbeau

啊，我可能太晚了，没关系。 - Tim Vermaelen

Answer 1

为解决此问题，您不应该在锚元素内部放置分隔符。 以下是一种使用content属性消除额外HTML的方法。 这类似于Bootstrap的面包屑。

但是，正如您已经熟悉的那样，首先进行一些清理^^

• 从nav-links中删除span分隔符
• 使用span用于文本节点（可能很方便将动画放在那里）
• 将动画从:after移动到:before（逻辑上，分隔符位于元素之后，除了最后一个子元素，这还可以给您控制右侧位置的元素宽度。）
• 使用:after作为分隔符
• 为主导航提供全宽度，并使用flexbox对其使用的空间进行对齐（flex-end，center，space-between等）

HTML更改

<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav navbar-primary w-100 ml-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">
                <span>Home</span>
                <span class="sr-only">(current)</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#past-bookings"><span>Archive</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#"><span>About</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#subscribe"><span>Newsletter</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="mailto: [e-mail]"><span>Contact</span></a>
        </li>
    </ul>
    <ul class="nav navbar-nav navbar-secondary flex-row justify-content-center flex-nowrap">
        <li class="nav-item">
            <a class="nav-link nav-social-icon" target="_blank" href="https://www.facebook.com/GetMove.Official/"><i class="fa fa-facebook-square"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link nav-social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"><i class="fa fa-instagram"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link nav-social-icon" target="_blank" href="https://soundcloud.com/getmove"><i class="fa fa-soundcloud"></i></a>
        </li>
    </ul>
</div>

解决方案

现在要解决这个问题，将动画放在 before 伪元素上，分隔符放在 after 伪元素上。

.navbar-primary .nav-item:after {
    content: "/";
    position: absolute;
    top: 0.25rem;
    left: auto;
    right: -0.5rem; /* control the amount of space for the separator */
}

.navbar-primary .nav-item:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.navbar-primary .nav-item:hover:before {
    width: 100%;
} 

如果你想改变字符，你只有一个编辑的地方。

演示

如果你想在没有填充的情况下改变动画，我建议使用calc()来分散nav-link的填充。

.navbar-primary .nav-link:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0.5rem; /* nav-link padding-left */
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.navbar-primary .nav-link:hover:before {
    width: calc(100% - 1rem); /* minus nav-link padding left and right */
}

演示

- Tim Vermaelen

---

谢谢Tim！非常有帮助的答案。 - octavemirbeau

Answer 2

你应该将hover放在a链接上，然后将a链接的position设置为relative，或者将class position-relative放在a链接上。

.nav-item a {
    position: relative;
}
.nav-item a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.nav-item a:hover:after {
    width: 100%;
}

- vidgarga

---

很抱歉，它不考虑斜杠。 - octavemirbeau