Изменить цвет выпадающего выбранного параметра при наведении

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

Вы можете сделать это через CSS без JS, но не все браузеры уважают эти настройки. Использование 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, например, который вместо этого получает свои цвета из настроек моей ОС для темы и цвета выделения ??‍♀️

Answer 2

Попробуйте использовать

        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>

Answer 3

Попробуйте использовать $ ('. Classname option: selected') и вызвать функцию наведения, она может работать.