javascript - ：在三角形无法实现悬停后
问题描述
我正在尝试创建一个悬停菜单。在它悬停时，菜单项中会出现一个三角形。但是当我进入下拉菜单时，它消失了。
.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 & ESB" href="#">
<img class="make-white" src="./images/Plattform1.svg" alt="Middleware & ESB">
<span class="service-title">Middleware & ESB</span>
</a>
</li>
<li class="one">
<a title="Search & Recommendation" href="#">
<img class="make-white" src="./images/Search2.svg" alt="Search & Recommendation">
<span class="service-title">Search & Recommendation</span>
</a>
</li>
<li class="three">
<a title="Identity & 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 & Access Management" href="#">
<img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity & Access Management">
<span class="service-title">Identity & 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 & Storage" href="#">
<img class="make-white" src="./images/aoe_icons_Effiziente_Datenverwaltung.svg"
alt="Databases & Storage">
<span class="service-title">Databases & 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 & 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 & Design</span>
</a>
</li>
<li class="three">
<a title="Middleware & 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 & 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 & Access Management" href="#">
<img class="make-white"
alt="Payment & Fulfillment" src="./images/aoe_icons_services_payment.svg">
<span class="service-title ng-binding">Payment & 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 & Operations" src="./images/aoe_icons_Continuous_Deployment.svg">
<span class="service-title ng-binding">DevOps & Operations</span>
</a>
</li>
<li class="three">
<a title="Databases & 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 & Applications" src="./images/aoe_icons_web_and_mobile_applications.svg">
<span class="service-title">Portals & 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 & Middleware" src="./images/Plattform1.svg">
<span class="service-title">ESB & 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 & 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>我尝试过使用之后和之前。一旦我进入下拉菜单，三角形就会从上面的菜单项中消失。我尝试了多个悬停类，但这对我没有帮助。有人可以帮我解决这个问题。
解决方案
nav .navbar-nav .nav-item .dropdown:before改为使用nav .navbar-nav .nav-item .nav-link:hover:after
为什么？
在您的代码中，您希望将父母定位在hover孩子身上，这在 css 中是不可能的。解决它在孩子中塑造形状然后你可以将它定位在悬停孩子上并显示在hover父母身上
也显示在：
.nav-link:hover + .dropdown:before ,.dropdown:hover:before{
display: block!important;
}
.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>推荐阅读
- java - 我想解析一个 Gson 信息但出现错误
- php - 完全不使用大框架的 PHP 路由
- java - servlet [] 的异常 org.apache.catalina.core.ApplicationContext.log Servlet.init() 抛出异常 java.lang.IllegalArgumentException
- android - Kotlin Coroutines 等待作业完成
- python - 使用 pandas 或 numpy 求解自定义方程
- node.js - 我在带有猫鼬的节点 js 中遇到此错误，E11000 重复键错误集合：domesticIndia.pans index: pan_id_1 dup key: { pan_id: null }
- javascript - toUpperCase 不能在 JavaScript 中使用对象中的项目
- flutter - 自适应 HLS 流 - Flutter video_player
- node.js - AWS Lambda 函数和 MongoDB 之间的连接超时
- java - 如何将带有类的 JAR 文件分发给其他开发人员？