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

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

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

В общем возникла проблема нарисовать немного сложное меню, состоящее из нескольких элементов
что то типа
<ul class="v-menu-work f-r">
                    <li>
                        <a class="circle-menu-work f-l">
                            <img src="">
                        </a>
                        <p class="legend-v-menu-work ">
                            <a>Клиенты</a>
                            <label>Управление клиентской базой</label>
                        </p>
                    </li>
                      <li>
                        <a class="circle-menu-work f-l">
                            <img src="">
                        </a>
                        <p class="legend-v-menu-work ">
                            <a>Клиенты</a>
                            <label>Управление клиентской базой</label>
                        </p>
                    </li>
                    
                     <li>
                        <a class="circle-menu-work f-l">
                            <img src="">
                        </a>
                        <p class="legend-v-menu-work ">
                            <a>Клиенты</a>
                            <label>Управление клиентской базой</label>
                        </p>
                    </li>
</ul>



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

Есть вариант использовать JS, метод hover, но не могу понять как написать селектор который красил бы только элементы выделенного li а не весь ul?

 //Пункты меню в личном кабинете
    $(".v-menu-work li").hover(
        function () {
           /* $('this > a').css({"background-color":"#70CF70"});
            $('this > p a').css({"background-color":"#70CF70"});*/
          $(".circle-menu-work").css({"background-color":"#70CF70"});
          $(".legend-v-menu-work a").css({"color":"#70CF70"});
        },
        function () {
            $('this a').css({"background-color":"#1FB2E2"});
            $('this p a').css({"color":"#1FB2E2"});
        }
    );
  • Вопрос задан
  • 7306 просмотров
Решения вопроса 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"});
        }
    );
Ответ написан
Ваш ответ на вопрос

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

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