當我在沒有 JS 的情況下將滑鼠懸停在選項元素上時，有沒有辦法改變它的背景？
我的意思是一個帶有選項的簡單選擇。
option:hover {
background-color: yellow;
}<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>我嘗試了所有可用的選項。但是沒有 Javascript，我找不到解決方案。
uj5u.com熱心網友回復：
幾乎任何瀏覽器都不支持您的要求。人們經常使用從無序串列中構建選擇的庫，但你最好的解決方案是回到你的設計師那里，詢問需求的必要性。許多庫的可訪問性合規性很差，而且它們總是增加了一層復雜性來維護。
uj5u.com熱心網友回復：
答案是否定的。目前，在CSS3中不支持此功能。也許在下一個版本中，會有。
但是，還有其他選擇...
第一種選擇是使用Bootstrap 5制作自定義下拉選單。
該替代方案如下所示：
.wrapper {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown-menu li:nth-child(1) > a:hover {
background-color: pink;
}
.dropdown-menu li:nth-child(2) > a:hover {
background-color: blue;
}
.dropdown-menu li:nth-child(3) > a:hover {
background-color: yellow;
}
.dropdown-menu li:nth-child(4) > a:hover {
background-color: green;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="wrapper">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Select</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="#">Volvo</a></li>
<li><a class="dropdown-item" href="#">Saab</a></li>
<li><a class="dropdown-item" href="#">VW</a></li>
<li><a class="dropdown-item" href="#">Audi</a></li>
</ul>
</div>
</div>唯一已知的方法select（限制）
瀏覽器兼容性：
鉻：?
火狐：?
野生動物園：?
這種替代方法是更改option?? 's 的默認視圖，您可以使用onfocusevent 屬性來更改它們。例如，您可以使用<select onfocus="this.size=4;" onblur="this.size=0;" onchange="this.size=1; .this.blur();">
這focus event實質上改變了選項的默認樣式。使用 anonfocus您可以指定.this.size=4;"為四個選項留出空間，onchange="this.size=1;"并在選擇一個選項后使其恢復默認值。允許它在選擇選項并再次打開后this:blur();保持相同的效果。onfocusselect
在此處查看該版本：
顯示代碼片段
option[value="volvo"]:hover {
background-color: pink;
}
option[value="saab"]:hover {
background-color: blue;
}
option[value="vw"]:hover {
background-color: green;
}
option[value="audi"]:hover {
background-color: yellow;
}
/* removes default scroll when using this.size */
select {
overflow: hidden;
}<select onfocus="this.size=4;" onchange="this.size=1; this.blur();">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">Opel</option>
<option value="audi">Audi</option>
</select>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/454008.html