我希望在懸停時使元素變暗而不使文本顏色變暗。我希望文本在懸停時保持純白色。
例子：
<a href="#" class="badge" style="background-color: #0072CE;"><span>Some Text</span></a>
CSS：
.badge {
display: inline-block;
padding: 0.35em 0.65em;
font-size: 0.75em;
font-weight: 700;
line-height: 1;
color: white;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
text-decoration: none;
}
.badge:hover {filter: brightness(0.8);}
.badge > span {color: white;}
我嘗試應用定位，z-index但這也不起作用。另外，我需要style標簽，因為背景顏色是動態生成的。
對上述任何幫助或完全不同的解決方案將不勝感激！
編輯：我的道歉，我應該清楚我也無權在樣式中設定懸停顏色。
uj5u.com熱心網友回復：
而不是使用過濾器：亮度（），我更喜歡使用過濾器：飽和（）。它使物件背景變暗，但不會影響您的文本。
.badge {
display: inline-block;
padding: 0.35em 0.65em;
font-size: 0.75em;
font-weight: 700;
line-height: 1;
color: white;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
text-decoration: none;
}
/* .badge:hover {filter: brightness(0.8);} */
.badge:hover {filter: saturate(0.5);}
.badge > span {color: white;}<a href="#" class="badge" style="background-color: #0072CE;"><span>Some Text</span></a>uj5u.com熱心網友回復：
當您無法更改行內樣式時，這是我現在能想到的最佳解決方案。
本質上是對跨度進行樣式化，而是根據懸停改變它的背景不透明度。
.badge {
display: inline-block;
font-size: 0.75em;
font-weight: 700;
line-height: 1;
color: white;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
text-decoration: none;
}
.badge>span {
display: block;
padding: .35em .65em;
border-radius: inherit;
}
.badge>span:hover {
background-color: #0004;
}<a href="#" class="badge" style="background-color: #0072CE;"><span>Some Text</span></a>uj5u.com熱心網友回復：
你可以使用 background-color 屬性來改變背景顏色
.badge {
display: inline-block;
padding: 0.35em 0.65em;
font-size: 0.75em;
font-weight: 700;
line-height: 1;
color: white;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
text-decoration: none;
background-color: rgba(111,111,111,1);
}
.badge:hover {background-color: rgba(111,111,111,.5);}
您可以使用 rgba(r, g, b, alpha) 中的 alpha 值使背景顏色透明
要么
你可以改變背景顏色
uj5u.com熱心網友回復：
而不是在 .badge 類上使用過濾器，只需更改背景顏色，這樣字體顏色就不會受到影響。此外，將 style 屬性直接寫入 html 標記時，您可能會遇到一些特殊性問題。如果您要向該元素添加一個類，您最好洗掉該樣式屬性并將其放入您擁有的 css 檔案中。希望這可以幫助！
.badge {
display: inline-block;
padding: 0.35em 0.65em;
font-size: 0.75em;
font-weight: 700;
line-height: 1;
color: white;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
text-decoration: none;
}
.badge:hover {background-color: 'insert whatever color you want';}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/454080.html
標籤：css