我正在嘗試創建一個在其直接子級上具有懸停效果的選項卡欄，因此我有以下代碼，旨在分別對串列中的每個元素應用效果，但它不起作用。
HTML 代碼：
<!-- navigation -->
<div>
<nav>
<ul class="primary-navigation underline-indicators flex">
<li class="active">
<a class="uppercase text-white letter-spacing-2" href="#"
><span>01</span>Active</a
>
</li>
<li>
<a class="uppercase text-white letter-spacing-2" href="#"
><span>02</span>Hovered</a
>
</li>
<li>
<a class="uppercase text-white letter-spacing-2" href="#"
><span>03</span>Idle</a
>
</li>
</ul>
</nav>
</div>
CSS 代碼：
.underline-indicators > * {
padding: var(--underline-gap, 1rem) 0;
border-bottom: 0.2rem solid hsl(var(--clr-white) / 0);
}
.underline-indicators > *:hover,
.underline-indicators > *:focus {
border-color: hsl(var(--clr-white) / 0.5);
}
.underline-indicators > .active {
border-color: hsl(var(--clr-white) / 1);
}
是否可以應用這種效果，如果可以，最好的方法是什么？
假設當我用 li:hover 替換 *:hover 時它作業得很好，但我想使用 * 所以我可以在代碼的不同部分重用相同的樣式。
uj5u.com熱心網友回復：
為什么不為要懸停在其上的每個元素設定唯一 ID？
uj5u.com熱心網友回復：
你能看到預期的效果嗎？
uj5u.com熱心網友回復：
<style>
.underline-indicators {
list-style:none;
}
.underline-indicators li > *{
padding: var(--underline-gap, 1rem) 0;
border-bottom: 0.2rem solid hsl(var(--clr-white) / 0);
color:green;
}
.underline-indicators *:hover,
.underline-indicators *:focus {
border-color: hsl(var(--clr-white) / 0.5);
}
.underline-indicators .active {
border-color: hsl(var(--clr-white) / 1);
}
</style>
試試這個 CSS 代碼
uj5u.com熱心網友回復：
這是因為您如何使用 var()。嘗試只使用正常的 hsl 值，它會起作用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/532012.html
標籤：htmlcss
上一篇：onmousemove出了點問題