Bootstrap 4导航链接悬停效果 [英] Bootstrap 4 nav-link hover effect
问题描述
我正试图在导航栏中仅将a链接作为悬停效果(而不是正斜杠). 但我似乎无法仅访问a链接，效果最终沿整个导航栏运行. 似乎与Bootstrap 4冲突.
I'm trying to put a hover effect targeting the a-links in the navigation bar only (not the forwardslashes). But I can't seem to access only the a-links, the effect ends up running along the whole navbar instead. Seems to be a conflict with Bootstrap 4 here.
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: hola@getmove.net">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
推荐答案
要解决此问题，请勿在分隔符元素内放置分隔符.
下面是一种使用content属性消除多余HTML的方法.
这类似于Bootstrap的面包屑.
To solve this issue you should not put separators inside the anchor elements.
Below is an approach which eliminates the extra HTML using the content property.
This is similar to Bootstrap's breadcrumb.
但是您已经很熟悉了，首先进行一些清理^^
But as you're already familiar, first some cleanup ^^
- 从
nav-links删除跨度分隔符
- 将跨度用于文本节点(可以很方便地将动画放在此处)
- 将动画从
:after移到:before(逻辑上，分隔符位于元素之后，也许除了最后一个孩子，这还为您提供了元素宽度，您现在可以在其中控制正确的位置.) - 使用
:after作为分隔符 - 为主导航提供全宽，并使用flexbox对齐其使用的空间(flex-end，center，space-between ...)
- remove the span separators from
nav-links - use the span for text nodes (could be handy to put the animation on there)
- move the animation from
:afterto:before(a separator is logically after an element, except for the last-child perhaps, this also gives you the elements width where you can now control the right position.) - use the
:afterfor the separator - provide full width for the main navigation and use flexbox to align the space it's using (flex-end, center, space-between, ...)
<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: hola@getmove.net"><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>
解决方案
现在要解决该问题，请将动画放在伪元素的前面，并将分隔符放在后面的伪元素上.
Solution
Now to solve the issue, place the animation on before and separator on the after pseudo elements.
.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%;
}
如果要更改字符，则只有一个编辑位置.
In case you want to change the character, you have only one editing place.
如果您想在不使用填充的情况下更改动画，我建议使用calc()分散nav-link填充.
In case you want to change the animation without the padding I'd suggest to distract the nav-link padding using calc().
.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 */
}
这篇关于Bootstrap 4导航链接悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
