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

Question

我正在尝试更改悬停时下拉菜单的初始（选定）文本的颜色。例如，如果选择了凌晨 4 点，则文本应该只在悬停时更改该选项。但是，每当我悬停并尝试选择一个选项时，我正在应用的 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;}

关于如何将悬停效果限制为仅选定选项的任何想法？

提前致谢！

Answer 1

尝试使用 $('.classname option:selected') 并调用它可能工作的悬停函数。

Answer 2

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

select {
  color: purple;
}
select option[selected] {
  color: green;
}

<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>

这适用于 macOS Firefox，但不适用于 Chrome，例如，Chrome 从我的主题和突出显示颜色的操作系统设置中获取颜色??‍♀️

Answer 3

尝试使用

        body {
            margin: 0px;
        }
        select {
            border: 0;
            color: #eee;
            background: transparent;
            font-size: 20px;
            font-weight: bold;
            padding: 2px 10px;
            width: 350px;
            -webkit-appearance: none;
        }
        #mainselection {
            overflow: hidden;
            width: 350px;
            background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C;
        }

    <div id="mainselection">
        <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>