Как привязать события наведения мыши на блок, который находится под другим блоком?

Здравствуйте. Как привязать события наведения мыши на блок, который находится под другим блоком?
Замысел таков: нужно вывести теги (небольшие квадратики). Наводя на левую половину этого квадратика он целеньком окрашивается в зеленый, на правую в красный.
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);
}