RainMEN
@RainMEN
HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.

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

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



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

что то типа

<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>
  • Вопрос задан
  • 7337 просмотров
Решения вопроса 1
PaulZi
@PaulZi
Может я что-то не понимаю, но разве нельзя здесь просто написать css-правило?
.v-menu-work li:hover>.circle-menu-work
{
background-color: #aabbcc;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Palehin
@Palehin
Frontend
Красьте по индексу. Если правильно понял:

$(".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"});
        }
    );
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы