个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试创建悬停菜单。将其悬停在菜单项中会出现一个三 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 & 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>我试过使用之后和之前。一旦我进入下拉菜单，三 Angular 形就从上面的菜单项中消失了。我尝试了多个悬停类(class)，但对我没有帮助。有人可以帮我解决这个问题吗。
最佳答案
使用 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;
}
.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>关于javascript - :after triangular shape not able to implement on hover，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54212541/
25
4
0
您好，我很确定我的问题很愚蠢，但我无法弄清楚它对我的生活有何影响。我有这个家庭作业，它基本上是为了加强我们在类里面学到的关于多态性的知识(顺便说一下，这是 C++)。该程序的基础是一个名为 shape
我是新手，所以需要任何帮助，当我要求一个例子时，我的教授给我了这段代码，我希望有一个工作模型...... from numpy import loadtxt import numpy as np fr
CSS 形状边距 和 外型不适用于我的系统。我正在使用最新版本的 Chrome。我唯一能想到的是我的操作系统是 Windows 7。这应该是一个问题吗？ 这是JSFiddle .但是，由于在您的系统上
#tf.shape(tensor)和tensor.shape()的区别 ?
我要求提示以下问题。如何从事件表添加到指定的单元格形状？当我知道名称但不知道如何为...中的每个形状实现论坛时，我可以添加形状 目前我有这样的事情: Sub loop() Dim a As Integ
我在 Excel 中有一个流程设计(使用形状、连接器等)。 我需要的是有一个矩阵，每个形状都有所有的前辈和所有的后继者。 在 VBA 中，为此我正在尝试执行以下操作: - 我列出了所有的连接器(Sha
我正在使用 JavaFX 编写一个教育应用程序，用户可以在其中绘制和操作贝塞尔曲线 Line、QuadCurve 和 CubicCurve。这些曲线应该能够用鼠标拖动。我有两种选择: 1- 使用类 L
我正在尝试绘制 pandas 系列中列的直方图 ('df_plot')。因为我希望 y 轴是百分比(而不是计数)，所以我使用权重选项来实现这一点。正如您在下面的堆栈跟踪中发现的那样，权重数组和数据系列
我尝试在 opencv dnn 中实现一个 tensorflow 模型。这是我遇到的错误: OpenCV: Can't create layer "flatten_1/Shape" of type "
我目前正在用 Java 开发一款游戏，我一直在尝试弄清楚如何在 Canvas 上绘制一个形状(例如圆形)，在不同的形状(例如正方形)之上，但是只绘制与正方形相交的圆的部分，类似于 Photoshop
import cv2 import numpy as np import sys import time import os cap = cv2.VideoCa
我已经成功创建了 Keras 序列模型并对其进行了一段时间的训练。现在我试图做出一些预测，但即使使用与训练阶段相同的数据，它也会失败。 我收到此错误:{ValueError}检查输入时出错:预期 em
我正在尝试逐行分解程序。 Y 是一个数据矩阵，但我找不到任何关于 .shape[0] 究竟做了什么的具体数据。 for i in range(Y.shape[0]): if Y[i] == -
我正在尝试运行代码，但它给了我这个错误: 行，列，_ = frame.shape AttributeError:“tuple”对象没有属性“shape” 我正在使用OpenCV和python 3.6，
我想在 JavaFx 中的 Pane 上显示形状。我正在使用从空间数据库中选择的 Oracle JGeometry 对象，它有一个方法 createShape() 但它返回 java.awt.Shap
在此代码中: import pandas as pd myj='{"columns":["tablename","alias_tablename","real_tablename","
我正在尝试将 API 结果应用于两列。 下面是我的虚拟数据框。不幸的是，这不是很容易重现，因为我使用的是带有 key 和密码的 API...这只是为了让您了解尺寸。 但我希望也许有人能发现一个明显的问
我的代码是: final String json = getObjectMapper().writeValueAsString(JsonView.with(graph) .onClas
a=np.arange(240).reshape(3,4,20) b=np.arange(12).reshape(3,4) c=np.zeros((3,4),dtype=int) x=np.arang
我正在尝试从张量中提取某些数据，但出现了奇怪的错误。在这里，我将尝试生成错误: a=np.random.randn(5, 10, 5, 5) a[:, [1, 6], np.triu_indices(
我是一名优秀的程序员,十分优秀！