Jquery 更改悬停时下拉选定选项的颜色

我正在尝试更改鼠标悬停时下拉菜单中初始选定文本的颜色。例如，如果选择4am选项，则该选项的文本应仅在悬停时更改。但是，每当我悬停并尝试选择一个选项时，我正在应用的CSS将其应用于下拉列表中的每个选项

所选选项是动态的，取决于一天中有人出现在网站上的时间。我尝试预先选择与某人访问网站的时间最接近的小时，这就是为什么将鼠标悬停应用于div而不是所选选项的原因

<div class="dropDownHover">
<select>
<option label="midnight" value="string:12:00 AM">midnight</option>
<option label="12:30 AM" value="string:12:30 AM">12:30 AM</option>
<option label="1:00 AM" value="string:1:00 AM">1:00 AM</option>
<option label="2:00 AM" value="string:2:00 AM">2:00 AM</option>
<option label="3:00 AM" value="string:3:00 AM">3:00 AM</option>
<option label="4:00 AM" value="string:4:00 AM" selected="selected">4:00 AM</option>
...
</select>
</div>

//css
.dropDownHover:{color: #333;}
.dropDownHover:hover{color: #ff0000;}

关于如何将悬停效果限制为仅选定的选项，您有什么想法吗

---

提前谢谢

尝试使用$'.classname选项：selected'并调用hover函数，这可能会起作用。

您可以通过CSS而不使用JS来实现这一点，但并非所有浏览器都尊重这些设置。 使用您最初发布的HTML：

挑选{ 颜色：紫色； } 选择选项[已选择]{ 颜色：绿色； } 午夜 上午12:30 凌晨1点 凌晨2点 凌晨三点 凌晨四点 例如，它可以在macOS Firefox上使用，但不能在Chrome上使用，Chrome可以从my OS设置中获取主题和突出显示颜色尝试使用

身体{ 边际：0px； } 挑选{ 边界：0； 颜色：eee； 背景：透明； 字体大小：20px； 字体大小：粗体； 填充：2x10px； 宽度：350px； -webkit外观：无； } 主要选择{ 溢出：隐藏； 宽度：350px； 背景：urlhttp://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif 无重复滚动319px 5px 58B14C； } 午夜 上午12:30 凌晨1点 凌晨2点 凌晨三点 凌晨四点

---

您将需要使用类似或的东西，因为下拉样式由浏览器决定。可能重复