我正在尝试从这个 website 复制导航菜单.我已经设法让它在一定程度上工作,但无法在悬停时使服务链接保持相同的颜色,而其他所有颜色都发生变化。
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul {
list-style: none;
padding: 0;
width: fit-content;
}
.nav ul:hover a{
color: #eee !important;
padding-bottom: 20px;
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1
}
.sub-menu {
height: 200px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
如您所见,我已经更改了悬停在无序列表上时的链接颜色,这可能不是尝试使其正常工作的最佳方式。拜托,有人可以建议我解决此问题的最佳方法吗?
最佳答案
你很接近——你必须从影响 .nav ul:hover a
的规则中删除 !important
,因为这将覆盖确保悬停的元素与其他元素颜色不同:
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul {
list-style: none;
padding: 0;
width: fit-content;
}
.nav ul:hover a{
color: #eee;
padding-bottom: 20px;
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1
}
.sub-menu {
height: 200px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
Here's a good resource !important
如何影响页面上的其他规则。
关于html - 在悬停一个时更改所有导航链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54539069/