Здравствуйте. Как привязать события наведения мыши на блок, который находится под другим блоком?
Замысел таков: нужно вывести теги (небольшие квадратики). Наводя на левую половину этого квадратика он целеньком окрашивается в зеленый, на правую в красный.
Z- index не работает. Да и даже если бы работал, как составить запрос " .teg .l:hover +.n " выберется и .l и .n
<div id="teg_1" class="teg">
<span class="n">text</span><!-- Сам блок -->
<span class="l"></span><!-- при наведении на .l фон .n меняется на зеленый -->
<span class="r"></span><!-- при наведении на .r фон .n меняется на красный -->
</div>
<div id="teg_2" class="teg">
<span class="n">text2</span>
<span class="l"></span>
<span class="r"></span>
</div>
<!-- И так далее -->
.teg{
float: left;
margin: 3px;
height: 23px;
}
.teg .n{
z-index: 31;
border: 1px solid #ccc;
height: 24px;
padding: 0 12px 0 12px;
background: #fff; /* Этот цвет нужно менять при наведении */
}
.teg .l{
z-index: 44432;
float: left;
width: 50%;
margin-top: -20px;
height: 18px;
background-color: hsla(0, 100%, 100%, 0);
}
.teg .r{
z-index: 444432;
float: right;
margin-top: -20px;
width: 50%;
height: 18px;
background-color: hsla(0, 100%, 100%, 0);
}
Простой
