Question

我已经在导航栏中的导航项上放置了一个悬停的下划线效果，但是我想从社交图标中删除该效果。我尝试使用几种方法来消除图标上的悬停效果，但是似乎没有任何作用，例如，我尝试添加！important或为社交图标添加额外的类或仅为a定义类-包含页面导航链接的链接，但Bootstrap 4似乎不允许我使用。

例如，我尝试向要对其产生悬停效果的项目添加“ nav-a”类：

.nav-item.nav-a {
    position: relative;
}

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

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

CSS

.nav-item {
    position: relative;
}

.nav-slash {
    display: flex;
    align-items: center;
    font-size: 11px;
}

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

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" target="_blank" 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 nav-a">
                        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                    </li>
                    <span class="nav-slash"> / </span>
                    <li class="nav-item nav-a">
                        <a class="nav-link" href="#archive">Archive</a>
                    </li>
                    <span class="nav-slash"> / </span>
                    <li class="nav-item nav-a">
                        <a class="nav-link" href="#guests">Guests</a>
                    </li>
                    <span class="nav-slash"> / </span>
                    <li class="nav-item nav-a">
                        <a class="nav-link" href="#subscribe">Newsletter</a>
                    </li>
                    <span class="nav-slash"> / </span>
                    <li class="nav-item nav-a">
                        <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>

此处的Codepen： https://codepen.io/ollebergkvist/pen/WNNPdxv

Answer 1

您需要为protected override bool OnBackButtonPressed() { return true; }使用足够的特异性，并且由于影响在:after上，因此特殊的nav-item类应该在nav-social-icon上，而不是{{1 }} ...

nav-item

演示：https://codeply.com/p/Hb8EkxaPSA

Answer 2

由于您对nav-item类具有悬停效果，因此可以将社交图标的类更改为其他名称（例如nav-social），以使它们不会受到影响。

覆盖Bootstrap类“ nav-item”

2 个答案: