使用不透明背景时无法获取子元素在悬停时更改文本颜色

我已经制作了一个简单的CSS菜单，并带有下拉菜单。当下拉列表可见时，我希望它及其父元素具有部分不透明的背景，并将文本颜色更改为深色。孩子UL做它应该做的事，但父母不做。它看起来像文本正在被父母的背景不透明覆盖。使用不透明背景时无法获取子元素在悬停时更改文本颜色

我希望它看起来是这样的：

而是它看起来像这样悬停：

我怎样才能让父对象“组合”黑暗与部分不透明有色悬停的背景？

jsfiddle

<div id="navigation"> 

<ul id='mainNav'> 
    <li class='active'><a href='index.html'>Home</a></li> 
    <li class='hasSub'><a href='#' id='portfolioLink'>PORTFOLIO</a> 
     <ul class='subMenu'> 
     <li><a href='#'>AUTOMOTIVE</a></li> 
     <li><a href='#'>COMMERCIAL</a></li> 
     <li><a href='#'>DISTRIBUTION</a></li> 
     <li><a href='#'>MANUFACTURING</a></li> 
     <li><a href='#'>MULTI-TENNANT</a></li> 
     <li><a href='#'>MUNICIPAL</a></li> 
     <li><a href='#'>UNDER CONSTRUCTION</a></li> 
     </ul> 
    </li> 
    <li><a href='#'>About</a></li> 
    <li><a href='#'>SERVICES</a></li> 

</ul> 
</div> 

body{ 
    font-family:arial; 
    font-size:16pt; 
} 


#navigation{ 
    width:100%; 
    height:30px; 
    background:#ff5200; 
    color:#fff; 
    text-align:center; 
} 

.subMenu{ 
    display:none; 
} 

#navigation > ul > li > a { 
    font-size: .6em; 
    letter-spacing: 1px; 
    text-decoration: none; 
    color: #ffffff; 
    text-transform: uppercase; 
    padding: 0 10px 0 10px; 
} 

#navigation > ul > li { 
    display: inline-block; 
    align:center; 
} 

#navigation > ul > li:hover > a { 
    color: #dddddd; 
} 

.hasSub:hover{ 
    background: url("img/75%-transparent-white.png"); 
    background: rgba(255,255,255,0.75);  
}  

.hasSub:hover a{ 
    color: #495c5e; 
} 

.hasSub:hover > .subMenu { 
     display: block; 
     position:absolute; 
    margin-left:-40px; 
} 

.subMenu{ 
    list-style-type:none; 
} 

.subMenu li{  
    background: url("img/75%-transparent-white.png"); 
    background: rgba(255,255,255,0.75) 
} 

.subMenu li > a{  
    font-size:.6em; 
    text-decoration:none; 
} 

.subMenu li > a:hover{ 
    color:#ff5200; 
    font-weight:bold; 
}

来源

2016-03-03 Shawn

问题是特异性。

#navigation > ul > li:hover > a

比

.hasSub:hover a

所以前者是压倒后者，尽管他们的源序更具体，.hasSub越来越颜色作为标准菜单项相同。

您可以通过改变

.hasSub:hover a{ 
    color: #495c5e; 
}

解决它变成

#navigation > ul li.hasSub:hover a{ 
    color: #495c5e; 
}

来源

2016-03-03 23:25:41

你的投资组合菜单上悬停时设置为浅灰色。只需将黑色设置为较深的颜色即可。

#navigation > ul > li:hover > a { 
    color: #000000; 
}

来源

2016-03-03 23:03:13 dannielum

使用不透明背景时无法获取子元素在悬停时更改文本颜色

回答

相关问题