javascript - 如何从 html 选择对象中删除悬停颜色？

Question

我正在尝试使用只有四种颜色的 html/css 制作一个简单的颜色选择器 - 到目前为止还不错。

让我恼火的是，当您将鼠标悬停在下拉列表中的某个选项上时，它会因为悬停状态而变为蓝色 - 但我似乎无法在 css 中禁用它。

我已经尝试了 select:hover 和 option:hover 属性，但似乎没有任何效果。是否有一种替代方法可以在不使用库的情况下达到相同的效果？

function changeColor() {
	var c = this.options[this.selectedIndex].value;
  document.getElementById("result").style.backgroundColor = c;  
}

document.getElementById("colourPicker").addEventListener("change", changeColor);

body {
  font-family: Arial, sans-serif;
}

#colourPicker {
  width: 50px;  
}

#result {
  padding: 20px 20px 20px 20px;
  border: 1px solid black;
}

.white {
  background-color: #ffffff;
}

.red {
  background-color: #ff0000;
}

.amber {
  background-color: #ffa500;
}

.green {
  background-color: #00b300;
}

<div id="test">
Pick a colour:
<select id="colourPicker">
  <option value="#ffffff" class="white"></option>
  <option value="#ff0000" class="red"></option>
  <option value="#ffa500" class="amber"></option>
  <option value="#00b300" class="green"></option>
</select>
</div>
<br><br>
<div id="result">
<center>Result Colour</center>
</div>

Answer 1

除了您已经面临的问题之外，在移动设备上查看时，您当前的设计会完全崩溃。移动设备通常会显示一个特殊的 UI 覆盖层，其中包含可用选项和每个选项的单选按钮，在本例中只有四个空白选项。

考虑改用...单选按钮!您可以使用标签来展示颜色选项。例如……

.colourchoices>label {
  display: inline-block;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 2px 4px 2px 2px;
}

<p class="colourchoices">
  <label style="background-color:#ffffff">
    <input type="radio" value="#ffffff" name="col" />White
  </label>
  <label style="background-color:#ff0000;color:white">
    <input type="radio" value="#ff0000" name="col" /> Red
  </label>
  <label style="background-color:#ffa500;color:white">
    <input type="radio" value="#ffa500" name="col" /> Amber
  </label>
  <label style="background-color:#00b300;color:white">
    <input type="radio" value="#00b300" name="col" /> Green
  </label>
</p>

请注意，这如何为您提供尽可能多的自由来设计元素的样式。