javascript - :after triangular shape not able to implement on hover

Question

我正在尝试创建悬停菜单。将其悬停在菜单项中会出现一个三 Angular 形。但是当我进入下拉菜单时，它就消失了。

.navbar-wrapper .col-lg-8 ul li a:hover{
  color:#f1c575
}

.navbar-brand img{
  padding-top:10px;
  padding-bottom:10px;
}

.navbar{
  position:relative;
}

.navbar:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 12.5px 0 12.5px;
  border-color: #fff transparent transparent transparent;
  left: 55px;
  top: 99%;
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  -webkit-transition: -webkit-transform 337ms ease-in-out;
  transition: -webkit-transform 337ms ease-in-out;
  transition: transform 337ms ease-in-out;
  transition: transform 337ms ease-in-out,-webkit-transform 337ms ease-in-out;
}


nav .navbar-nav .nav-item .nav-link{
   line-height:59px;
  -webkit-transition: background-color 1s;
  -moz-transition: background-color 1s;
  -o-transition: background-color 1s;
  transition: background-color 1s;
}

nav .navbar-nav .nav-item .nav-link:hover, .dropdown:hover .dropbtn{
  background-color: #f1c575;
}

nav ul li:hover > .nav-link {
  background-color: #f1c575;
  color: #FFF;
}


nav .navbar-nav .nav-item .nav-link {
  position: relative;
}

nav .navbar-nav .nav-item .dropdown:before {
content: "";
display: none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #7B8B93;
position: absolute;
left: 35%;
bottom: 0px;
}

/* Navbar Ends */

/* Nav Menu Starts */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #7b8b93;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

nav ul li .dropdown:hover .dropdown-content {
  display: block;
}

.dropdown{
  position: initial;
}


.nav-link:hover + .dropdown .dropdown-content{
  display: block;
}
.nav-link:hover + .dropdown:before ,.dropdown:hover:before{
  display: block!important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"><img src="./images/Cnetric_High-Res_Logo.png" width="160px" height="65px"
            alt="Cnetric Company 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="#">Capabilities</a>
                <div class="dropdown d-none d-md-block">
                    <div class="dropdown-content py-5">
                        <div class="row">
                            <div class="col-lg-4 open-source">
                                <h3 class="ml-4 menu-text">Products</h3>
                                <p class="ml-3"><a class="ml-2" href="#">Magento</a></p>
                                <p class="ml-3"><a class="ml-2" href="#">IBM v9 Commerce</a></p>
                                <p class="ml-3"><a class="ml-2" href="#">Drupal</a></p>
                            </div>
                            <div class="col-lg-8 services">
                                <h3 class="menu-text ml-5">Product Categories</h3>
                                <ul class="list-categories">

                                    <li class="one">
                                        <a href="#" title="E-Commerce">

                                            <img class="make-white" src="./images/aoe_icons_services_order_management.svg"
                                                alt="E-Commerce">

                                            <span class="service-title">E-Commerce</span>
                                        </a>
                                    </li>

                                    <li class="two">
                                        <a title="Content Management" href="#">

                                            <img class="make-white" src="./images/aoe_icons_webportal.svg"
                                                alt="Content Management">

                                            <span class="service-title">Content Management</span>
                                        </a>
                                    </li>

                                    <li class="three">
                                        <a title="Middleware &amp; ESB" href="#">

                                            <img class="make-white" src="./images/Plattform1.svg" alt="Middleware &amp; ESB">

                                            <span class="service-title">Middleware &amp; ESB</span>
                                        </a>
                                    </li>

                                    <li class="one">
                                        <a title="Search &amp; Recommendation" href="#">

                                            <img class="make-white" src="./images/Search2.svg" alt="Search &amp; Recommendation">

                                            <span class="service-title">Search &amp; Recommendation</span>
                                        </a>
                                    </li>

                                    <li class="three">
                                        <a title="Identity &amp; Access Management" href="#">

                                            <img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity">

                                            <span class="service-title">PIM Systems</span>
                                        </a>
                                    </li>

                                    <li class="three">
                                        <a title="Identity &amp; Access Management" href="#">

                                            <img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity &amp; Access Management">

                                            <span class="service-title">Identity &amp; Access Management</span>
                                        </a>
                                    </li>

                                    <li class="one">
                                        <a title="Development Frameworks" href="#">

                                            <img class="make-white" src="./images/aoe_icons_betrieb.svg" alt="Development Frameworks">

                                            <span class="service-title">Development Frameworks</span>
                                        </a>
                                    </li>

                                    <li class="two">
                                        <a title="CRM Systems" href="#">

                                            <img class="make-white" src="./images/aoe_icons_crm_2.svg" alt="CRM Systems">

                                            <span class="service-title">CRM Systems</span>
                                        </a>
                                    </li>

                                    <li class="three">
                                        <a title="Databases &amp; Storage" href="#">

                                            <img class="make-white" src="./images/aoe_icons_Effiziente_Datenverwaltung.svg"
                                                alt="Databases &amp; Storage">

                                            <span class="service-title">Databases &amp; Storage</span>
                                        </a>
                                    </li>

                                    <li class="one">
                                        <a title="Mobile Frameworks" href="#">

                                            <img class="make-white" src="./images/aoe_icons_mobile-02.svg"
                                                alt="Mobile Frameworks">

                                            <span class="service-title">Mobile Frameworks</span>
                                        </a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Solutions</a>
                <div class="dropdown d-none d-md-block">
                    <div class="dropdown-content py-5">
                        <div class="row">
                            <div class="col-lg-4 open-source">
                                <h3 class="ml-4 menu-text">Open Source Solution Suites</h3>
                                <p class="ml-3 commerce"><a class="ml-2" href="#">Dr.Commerce</a></p>
                                <p class="ml-3 universal"><a class="ml-2" href="#">Universal Commerce</a></p>
                                <p class="ml-3 emmerging"><a class="ml-2" href="#">Emmerging Techlogies</a></p>
                            </div>
                            <div class="col-lg-8 services">
                                <h3 class="menu-text ml-5">Services & Technologies</h3>
                                <ul class="list-categories">

                                    <li class="one">
                                        <a href="#" title="E-Commerce">

                                            <img class="make-white"
                                                src="./images/Strategy2.svg">
                                            <span class="service-title">Strategy &amp; Consulting</span>
                                        </a>
                                    </li>

                                    <li class="two">
                                        <a title="Content Management" href="#">

                                            <img class="make-white" 
                                                src="./images/Design1.svg">
                                            <span class="service-title">UX &amp; Design</span>
                                        </a>
                                    </li>

                                    <li class="three">
                                        <a title="Middleware &amp; ESB" href="#">

                                            <img class="make-white"
                                                alt="Software Architecture" src="./images/aoe_icons_Software_Architektur.svg">
                                            <span class="service-title">Software Architecture</span>
                                        </a>
                                    </li>

                                    <li class="one">
                                        <a title="Search &amp; Recommendation" href="#">

                                            <img class="make-white" 
                                                src="./images/aoe_icons_betrieb.svg">
                                            <span class="service-title">Agile Development</span>
                                        </a>
                                    </li>

                                    <li class="two">
                                        <a title="PIM Systems" href="#">
                                            <img class="make-white"  alt="Digital Products"
                                                src="./images/Digitization2.svg">
                                            <span class="service-title">Digital Products</span>
                                        </a>
                                    </li>

                                    <li class="three">
                                        <a title="Identity &amp; Access Management" href="#">

                                            <img class="make-white" 
                                                alt="Payment &amp; Fulfillment" src="./images/aoe_icons_services_payment.svg">
                                            <span class="service-title ng-binding">Payment &amp; Fulfillment</span>
                                        </a>
                                    </li>

                                    <li class="one">
                                        <a title="Development Frameworks" href="#">

                                            <img class="make-white" alt="Systems Integration"
                                                src="./images/Integration1.svg">
                                            <span class="service-title ng-binding">Systems Integration</span>
                                        </a>
                                    </li>

                                    <li class="two">
                                        <a title="CRM Systems" href="#">

                                            <img class="make-white"
                                                alt="DevOps &amp; Operations" src="./images/aoe_icons_Continuous_Deployment.svg">
                                            <span class="service-title ng-binding">DevOps &amp; Operations</span>
                                        </a>
                                    </li>

                                    <li class="three">
                                        <a title="Databases &amp; Storage" href="#">

                                            <img class="make-white"  alt="Customer Care"
                                                src="./images/aoe_icons_Customer_Care.svg">
                                            <span class="service-title ng-binding">Customer Care</span>
                                        </a>
                                    </li>

                                    <li class="one">
                                        <a title="Mobile Frameworks" href="#">

                                            <img class="make-white" src="./images/aoe_icons_mobile-02.svg"
                                                alt="Mobile Frameworks">

                                            <span class="service-title">Mobile Frameworks</span>
                                        </a>
                                    </li>
                                    <li class="two">
                                        <a title="Portal" href="#">

                                                <img class="make-white"  alt="Portals &amp; Applications" src="./images/aoe_icons_web_and_mobile_applications.svg">
                                                <span class="service-title">Portals &amp; Applications</span>
                                        </a>
                                    </li>
                                    <li class="three">
                                        <a title="CMS Solutions" href="#">

                                                <img class="make-white" alt="CMS Solutions" src="./images/aoe_icons_web_content_management.svg">
                                                <span class="service-title">CMS Solutions</span>
                                        </a>
                                    </li>
                                    <li class="one">
                                        <a title="Middle Ware" href="#">

                                                <img class="make-white"  alt="ESB &amp; Middleware" src="./images/Plattform1.svg">
                                                <span class="service-title">ESB &amp; Middleware</span>
                                        </a>
                                    </li>
                                    <li class="two">
                                        <a title="CRM Integration" href="#">

                                                <img class="make-white"  alt="CRM Integration" src="./images/aoe_icons_crm_2.svg">
                                                <span class="service-title">CRM Integration</span>
                                        </a>
                                    </li>
                                    <li class="three">
                                        <a title="Identity" href="#">

                                                <img class="make-white"  src="./images/aoe_icons_technologies_IRM.svg">
                                                <span class="service-title">Identity &amp; Access Mngmt</span>
                                        </a>
                                    </li>
                                    <li class="one">
                                        <a title="Search" href="#">

                                                <img class="make-white"  alt="Search" src="./images/Search2.svg">
                                                <span class="service-title">Search</span>
                                        </a>
                                    </li>
                                    <li class="two">
                                        <a title="E-Commerce" href="#">

                                                <img class="make-white" alt="E-Commerce" src="./images/aoe_icons_services_order_management.svg">
                                                <span class="service-title">E-Commerce</span>
                                        </a>
                                    </li>
                                    <li class="three">
                                        <a title="Mobile Apps" href="#">

                                                <img class="make-white" alt="Mobile Apps" src="./images/aoe_icons_web_and_mobile_applications.svg">
                                                <span class="service-title">Mobile Apps</span>
                                        </a>
                                    </li>
                                    <li class="one">
                                        <a title="PIM Systems" href="#">

                                                <img class="make-white"  alt="PIM Systems" src="./images/aoe_icons_technologies-13.svg">
                                                <span class="service-title">PIM Systems</span>
                                        </a>
                                    </li>

                                </ul>
                                <p class="text-center mt-4"><a class="btn btn-custom">View All</a></p>  
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

我试过使用之后和之前。一旦我进入下拉菜单，三 Angular 形就从上面的菜单项中消失了。我尝试了多个悬停类(class)，但对我没有帮助。有人可以帮我解决这个问题吗。

Answer 1

使用 nav .navbar-nav .nav-item .dropdown:before 代替 nav .navbar-nav .nav-item .nav-link:hover:after

为什么？

在您的代码中，您希望在 hover 子级上定位父级，这在 css 中是不可能的。解决它在 child 中塑造形状然后你可以将它定位在悬停的 child 身上，也可以在 hover parent

上显示

也显示在:

.nav-link:hover + .dropdown:before ,.dropdown:hover:before{
  display: block!important;
}

See working code

.navbar-wrapper .col-lg-8 ul li a:hover{
  color:#f1c575
}

.navbar-brand img{
  padding-top:10px;
  padding-bottom:10px;
}

.navbar{
  position:relative;
}

.navbar:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 12.5px 0 12.5px;
  border-color: #fff transparent transparent transparent;
  left: 55px;
  top: 99%;
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  -webkit-transition: -webkit-transform 337ms ease-in-out;
  transition: -webkit-transform 337ms ease-in-out;
  transition: transform 337ms ease-in-out;
  transition: transform 337ms ease-in-out,-webkit-transform 337ms ease-in-out;
}


nav .navbar-nav .nav-item .nav-link{
   line-height:59px;
  -webkit-transition: background-color 1s;
  -moz-transition: background-color 1s;
  -o-transition: background-color 1s;
  transition: background-color 1s;
}

nav .navbar-nav .nav-item .nav-link:hover, .dropdown:hover .dropbtn{
  background-color: #f1c575;
}

nav ul li:hover > .nav-link {
  background-color: #f1c575;
  color: #FFF;
}


nav .navbar-nav .nav-item .nav-link {
  position: relative;
}

nav .navbar-nav .nav-item .dropdown:before {
content: "";
display: none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #7B8B93;
position: absolute;
left: 35%;
bottom: 0px;
}

/* Navbar Ends */

/* Nav Menu Starts */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #7b8b93;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

nav ul li .dropdown:hover .dropdown-content {
  display: block;
}

.dropdown{
  position: initial;
}


.nav-link:hover + .dropdown .dropdown-content{
  display: block;
}
.nav-link:hover + .dropdown:before ,.dropdown:hover:before{
  display: block!important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">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="#">Capabilities</a>
        <div class="dropdown">
          <div class="dropdown-content py-5">
            <div class="row">
              <div class="col-lg-4 open-source">
                <h3 class="ml-4 menu-text">Products</h3>
                <p class="ml-3"><a class="ml-2" href="#">Magento</a></p>
                <p class="ml-3"><a class="ml-2" href="#">IBM v9 Commerce</a></p>
                <p class="ml-3"><a class="ml-2" href="#">Drupal</a></p>
              </div>
              <div class="col-lg-8 services">
                <h3 class="menu-text ml-5">Product Categories</h3>
                <ul class="list-categories">

                  <li class="one">
                    <a href="#" title="E-Commerce">

                      <img class="make-white" src="./images/aoe_icons_services_order_management.svg" alt="E-Commerce">

                      <span class="service-title">E-Commerce</span>
                    </a>
                  </li>