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选项：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上无效，而是从我的OS设置中获取主题和突出显示颜色的颜色??‍♀️

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>

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

3 个答案: