Как сделать hover на иконку, чтобы менялся цвет у первого div в кастомном select?

Question

[Mesuti]

Привет!
Сочинил кастомный select.
Решил поставить иконку обозначения списка, но при наведении на иконку, первый элемент списка не меняет цвет.
Сложность в том, что первый элемент изначально скрыт и появляется только после выбора какого-либо select.
Поэтому сначала надо второй светить, затем первый.
Может я вообще изначально не так все начал делать?
Если с первого взгляда есть замечания, буду рад услышать.
Все на костылях =) учусь нативному JS

Answer 1

[Максим]

Просто добавь к стрелке стиль pointer-events: none;

Comments

[Mesuti]

Тогда curson: pointer не работает =)
B в целом лагает...

.select-wrapper span:hover {
        cursor: pointer;
        pointer-events: none;
    }

[Максим]

Mesuti, дак нужно не span:hover, а просто span. Так понятное дело лагать будет )

.select-wrapper span {
    font-size: 20px;
    color: black;
    position: absolute;
    top: 8px;
    right: 15px;
    display: block;
    transform: rotate(90deg);
    transition: .3s;
    pointer-events: none;
}

[Mesuti]

Максим, Невероятно!!! Всего 1 строкой решается вся проблема. =) спасибо Вам большое, не слышал еще об pointer-events. Век живи век учись... Да и наверное не с той стороны пошел во фронтенд, начал с JS

[Mesuti]

Максим, я уже думал воротить с десяток строк на JS, все ховеры на нем прописать с условиями и перебором массива.. ахах

[Максим]

Mesuti, да всё нормально, это с опытом приходит)

Answer 2

[FeST1VaL]

Засунь стрелочку к тексту в один блок или сделай отдельно шапку селектора и сам скрытый список:
т.е примерно так: hover вешаешь на selector__header и усе

<div class="selector">
	<div class="selector__header">
		<span>Выберите</span>
		<span class="arrow"></span>
	</div>
	<div class="selector__list" style="display:none;"></div>
</div>