@eratnikstudio

Как вывести значение value при наведении в select > option?

Есть выпадающий список.
<select aria-label="Материал" id="fieldname1_1" name="fieldname1_1" class="field depItemSel large required valid" aria-invalid="false">

	<option class="depItem" value="Прозрачная пленка, имеет клеевой слой на оборотной стороне.  Толщина 100мкр  Поверхность, матовая или глянцевая (выбираете по потребности)  С оборота 	защищена бумажной подложкой Оставляет клей при демонтаже." vt="Пленка самоклеющаяся прозрачная" data-i="0">Пленка самоклеющаяся прозрачная</option>

	<option class="depItem" value="Пленка самоклеящаяся белая" vt="Пленка самоклеящаяся белая" data-i="1">Пленка самоклеящаяся белая</option><option class="depItem" value="Пленка с 	изображением с клеевой стороны" vt="Пленка с изображением с клеевой стороны" data-i="2">Пленка с изображением с клеевой стороны</option>

	<option class="depItem" value="Перфорированная пленка" vt="Перфорированная пленка" data-i="3">Перфорированная пленка</option>

	<option class="depItem" value="Самоклеющаяся пленка с удаляемым клеем, белая" vt="Самоклеющаяся пленка с удаляемым клеем, белая" data-i="4">Самоклеющаяся пленка с удаляемым клеем, 	белая</option>

	<option class="depItem" value="Самоклеющаяся пленка с удаляемым клеем, прозрачная" vt="Самоклеющаяся пленка с удаляемым клеем, прозрачная" data-i="5">Самоклеющаяся пленка с 	удаляемым клеем, прозрачная</option>

	<option class="depItem" value="Бэклит" vt="Бэклит" data-i="6">Бэклит</option>

</select>

class формируется автоматически. Так что он одинаковый у всех опций.
Я хочу вывести значение value при наведении на выбранную опцию из списка.

Пытался через CSS - не получилось((
Вот мой CSS (то, до чего я додумался :))

option[value] {
  position: relative;
  display: inline-block;
  color: red;
  cursor: pointer;
  border-bottom: 1px dashed #000;
}
 
option[value]:hover::after {
    content: attr(value);
    position: absolute;
    left: 20%; top: 30%;
    z-index: 999999;
    background: rgba(255,255,230,0.9);
    font-family: Arial, sans-serif;
    font-size: 11px;
    padding: 5px 10px;
    border: 1px solid #333;
   }


Но это не работает((. Не понимаю почему
  • Вопрос задан
  • 64 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы