Как перекрашивать дочерние элементы при наведении мышки на элемент li?
Может я что-то не понимаю, но разве нельзя здесь просто написать css-правило?
.v-menu-work li:hover>.circle-menu-work
{
background-color: #aabbcc;
}

Красьте по индексу. Если правильно понял:

$(".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"});
        }
    );
