Как перекрашивать дочерние элементы при наведении мышки на элемент li?

Question

[Игорь Пушкарский]

Приветствую!



В общем возникла проблема нарисовать немного сложное меню, состоящее из нескольких элементов

что то типа

<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>

Возможно ли это сделать с помощью CSS чтобы ie 8 тоже поддерживал?



Есть вариант использовать JS, метод hover, но не могу понять как написать селектор который красил бы только элементы выделенного li а не весь 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

[PaulZi]

Может я что-то не понимаю, но разве нельзя здесь просто написать css-правило?

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

Comments

[Игорь Пушкарский]

Спасибо это как раз то что я искал, просто не знал как это записать =) +1

[Vitali Borovik]

Зачем увеличивать специфичность?
.v-menu-work li:hover .circle-menu-work {}

[PaulZi]

На случай вложенности меню.

Answer 2

[Александр]

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

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

Comments

[Игорь Пушкарский]

Спасибо Palehin, правильно поняли решении подходит=)

[dmitry_dvp]

Жесть какая.

Крастье от this

$(this).find(".circle-menu-work").css({"background-color":"#70CF70"});
$(this).find(".legend-v-menu-work a").css({"color":"#70CF70"});

з.ы. но CSS'ом конечно всяко кошернее