How to recolor child elements when hovering the mouse over an li element?

Question

css

Greetings!

In general, there was a problem to draw a slightly complex menu consisting of several elements of
something like

<ul class="v-menu-work f-r"><br>
                    <li><br>
                        <a class="circle-menu-work f-l"><br>
                            <img src=""><br>
                        </a><br>
                        <p class="legend-v-menu-work "><br>
                            <a>Клиенты</a><br>
                            <label>Управление клиентской базой</label><br>
                        </p><br>
                    </li><br>
                      <li><br>
                        <a class="circle-menu-work f-l"><br>
                            <img src=""><br>
                        </a><br>
                        <p class="legend-v-menu-work "><br>
                            <a>Клиенты</a><br>
                            <label>Управление клиентской базой</label><br>
                        </p><br>
                    </li><br>
                    <br>
                     <li><br>
                        <a class="circle-menu-work f-l"><br>
                            <img src=""><br>
                        </a><br>
                        <p class="legend-v-menu-work "><br>
                            <a>Клиенты</a><br>
                            <label>Управление клиентской базой</label><br>
                        </p><br>
                    </li><br>
</ul><br>
<br>

Is it possible to do this with CSS so that ie 8 supports it too?

There is an option to use JS, the hover method, but I can’t figure out how to write a selector that would paint only the elements of the selected li and not the entire ul?

//Пункты меню в личном кабинете<br>
    $(".v-menu-work li").hover(<br>
        function () {<br>
           /* $('this > a').css({"background-color":"#70CF70"});<br>
            $('this > p a').css({"background-color":"#70CF70"});*/<br>
          $(".circle-menu-work").css({"background-color":"#70CF70"});<br>
          $(".legend-v-menu-work a").css({"color":"#70CF70"});<br>
        },<br>
        function () {<br>
            $('this a').css({"background-color":"#1FB2E2"});<br>
            $('this p a').css({"color":"#1FB2E2"});<br>
        }<br>
    );<br>

Answer 1

Maybe I don't understand something, but isn't it possible to just write a css rule here?

.v-menu-work li:hover>.circle-menu-work
{
background-color: #aabbcc;
}

Answer 2

Paint by index. If I understand correctly:

$(".v-menu-work li").hover(
        function () {
      var index = $(".v-menu-work li").index(this);
           /* $('this > a').css({"background-color":"#70CF70"});
            $('this > p a').css({"background-color":"#70CF70"});*/
          $(".circle-menu-work").eq(index).css({"background-color":"#70CF70"});
          $(".legend-v-menu-work a").eq(index).css({"color":"#70CF70"});
        },
        function () {
            $('this a').css({"background-color":"#1FB2E2"});
            $('this p a').css({"color":"#1FB2E2"});
        }
    );