我創建了一個懸停效果，如下所示：
例如，當專案“選單”懸停在其特定的 li 元素上時，背景顏色會更改為較深的顏色。可能很難說，但我相信白色字體出現在塊的后面，它有一個輕微的灰色外殼。正如您在它左側的鏈接中看到的那樣，它們看起來更白，并且位于背景之上。
如果情況確實如此，我該如何解決？一旦出現懸停，我似乎也無法定位鏈接的字體顏色。我當然已經在每種可能的組合中嘗試了 z-index，并設定了位置等。
html 是帶有 ul 及其 lis 的基本導航串列：
<nav class="navigation">
<ul class="nav-list">
<li class="nav-item"><a href="#" class= "nav-link">Venue</a></li>
<li class="nav-item"><a href="#" class= "nav-link">Floral</a></li>
<li class="nav-item"><a href="#" class= "nav-link">Photography</a>
</li>
<li class="nav-item"><a href="#" class= "nav-link">Musicians</a></li>
<li class="nav-item"><a href="#" class= "nav-link">Menu</a></li>
</ul>
</nav>
這是CSS：
.nav-list{
position:absolute;
background-color: rgba(0,0,0,0.5);
width:100%;
height: 14%;
display: flex;
justify-content: space-around;
align-items:center;
transition: all 1s;
}
.nav-link, .sub-item{
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.8rem;
color: white;
}
.nav-item:hover {
background-color: #000;
opacity: 65%;
height:100%;
width:10%;
display:flex;
justify-content:center;
align-items:center;
}
uj5u.com熱心網友回復：
如果你設定了opacity，opacity整個元素的 將會改變——包括字體。
只需使用背景顏色。
.nav-item:hover {
background-color: rgba(0,0,0,0.8);
height:100%;
width:10%;
display:flex;
justify-content:center;
align-items:center;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375062.html
下一篇：擺脫懸停時的邊界