Есть выпадающий список.
<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;
}
Но это не работает((. Не понимаю почему
Простой
