html - CSS:覆盖父元素样式
问题描述
以前在谷歌搜索时,我遇到了一个带有漂亮动画的 HTML 菜单。我决定在我的一个项目中使用菜单。
原始菜单没有子菜单。我添加了子菜单以满足我的项目需要。悬停时,菜单如下所示:-
如您所见,在最后一张图片中,子菜单中出现了一些不必要的黄线。我认为这是因为子元素继承了其父元素的样式。
我一直试图通过为子元素编写显式类来禁用/覆盖它,但根本没有成功。我对 CSS 有一定的了解。我想编写这样的 CSS,它会删除第三张图像中突出显示的不需要的黄线。
.cl-effect-14 a {
padding: 0 20px;
height: 46px;
}
.cl-effect-14 a::before,
.cl-effect-14 a::after {
position: absolute;
width: 44px;
height: 2px;
background: #F9DB55;
content: '';
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
.cl-effect-14 a::before {
top: 0;
left: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.cl-effect-14 a::after {
right: 0;
bottom: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.cl-effect-14 a:hover::before,
.cl-effect-14 a:hover::after,
.cl-effect-14 a:focus::before,
.cl-effect-14 a:focus::after {
opacity: 1;
}
.cl-effect-14 a:hover::before,
.cl-effect-14 a:focus::before {
left: 50%;
-webkit-transform: rotate(0deg) translateX(-50%);
-moz-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
/*****my code******/
ul li ul.dropdown {
min-width: 100%;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
.links {
color: black;
background: white;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
transform: none;
}
.links::before {
transform: none;
}
.links::after {
transform: none;
}
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav cl-effect-14">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="typo.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="blog.html">Blog</a></li>
<li>
<a href="#">Products ▾</a>
<ul class="dropdown">
<li><a href="#" class="links">Laptops</a></li>
<li><a href="#" class="links">Monitors</a></li>
<li><a href="#" class="links">Printers</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
有人可以帮我用 CSS 删除那些不需要的黄线。提前致谢。
资源:
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!--web-fonts-->
<link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Cabin:400,700,500,600' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Pacifico|Prata' rel='stylesheet' type='text/css'>
<!--//web-fonts-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
解决方案
因此,您要解决的主要问题是下拉a
元素上的黄线。由于导航栏效果的 css 的编写方式,这些正在发生。例如:
.cl-effect-14 a::before
这意味着a
带有类元素的任何标签cl-effect-14
都将获得这些更改,因此这会将您的a
标签包含在下拉列表中,因为下拉列表具有该类的父级。
现在,这个解决方案并不理想,但您可以使用 css:not()
选择器来指定您不希望这些效果应用于a
带有类的标签links
。所以,css变成了这样:
.cl-effect-14 a {
margin: 0 3px;
padding: 0 20px;
height: 46px;
}
.cl-effect-14 a:not(.links)::before,
.cl-effect-14 a:not(.links)::after {
position: absolute;
width: 44px;
height: 2px;
background: #F9DB55;
content: '';
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
.cl-effect-14 a:not(.links)::before {
top: 0;
left: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.cl-effect-14 a:not(.links)::after {
right: 0;
bottom: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.cl-effect-14 a:not(.links):hover::before,
.cl-effect-14 a:not(.links):hover::after,
.cl-effect-14 a:not(.links):focus::before,
.cl-effect-14 a:not(.links):focus::after {
opacity: 1;
}
.cl-effect-14 a:not(.links):hover::before,
.cl-effect-14 a:not(.links):focus::before {
left: 50%;
-webkit-transform: rotate(0deg) translateX(-50%);
-moz-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
请注意,我没有将:not
选择器添加到第一部分,因为某些原因会弄乱我正在玩的 JsFiddle 上的布局。不过,您必须让我知道这是否适合您,因为我可能没有使用与您相同的引导程序版本。我也给它添加了一个边距,所以它看起来更像你分享的图像
我还将您的.links
css 更改为:
.dropdown .links {
color: black;
background: white;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
由于某种原因,该text-decoration
属性没有被应用,所以我只是添加了特异性。
我的最终代码如下所示(点击full page
展开):
.cl-effect-14 a {
margin: 0 3px;
padding: 0 20px;
height: 46px;
}
.cl-effect-14 a:not(.links)::before,
.cl-effect-14 a:not(.links)::after {
position: absolute;
width: 44px;
height: 2px;
background: #F9DB55;
content: '';
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
.cl-effect-14 a:not(.links)::before {
top: 0;
left: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.cl-effect-14 a:not(.links)::after {
right: 0;
bottom: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.cl-effect-14 a:not(.links):hover::before,
.cl-effect-14 a:not(.links):hover::after,
.cl-effect-14 a:not(.links):focus::before,
.cl-effect-14 a:not(.links):focus::after {
opacity: 1;
}
.cl-effect-14 a:not(.links):hover::before,
.cl-effect-14 a:not(.links):focus::before {
left: 50%;
-webkit-transform: rotate(0deg) translateX(-50%);
-moz-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
/*****my code******/
ul li ul.dropdown {
min-width: 100%;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
.dropdown .links {
color: black;
background: white;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav cl-effect-14">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="typo.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="blog.html">Blog</a></li>
<li>
<a href="#">Products ▾</a>
<ul class="dropdown">
<li><a href="#" class="links">Laptops</a></li>
<li><a href="#" class="links">Monitors</a></li>
<li><a href="#" class="links">Printers</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
下拉菜单仍然偏离中心,但这是另一个问题,如果它对你来说是一样的,你可能会发布另一个关于它的问题。
推荐阅读
- python - AWS lambda 内存使用情况与 python 代码中的临时文件
- c++-winrt - 在 UWP 应用中,html 资源应该存储在 assets 目录中的什么位置?
- haskell - 为什么`and`对于空的可折叠返回True,但`or`在Haskell中返回False?
- python - 向 Folium 地图添加标记
- php - 具有相同值的不同变量会影响另一个变量
- python - 如何限制在for循环中填充数据框的行数
- matlab - 更改 regionprops 方向范围
- html - 我无法在引导移动视图上滚动
- python - 使用多个 Gunicorn 工作者时仅启动一次 Django 配置应用程序
- java - Java读/写文件更改字符?