1

Подскажите пожалуйста, как мне выделять не все пункты li (.card), а только тот, который в hover должен быть?

Верстка упрощена для вопроса.

В целом - при наведении на карточку должны срабатывать несколько действий: Анимация, изменение цвета... у нескольких других, встроенных в li элементов.

И я не разобрался как это сделать с $(this)

<ul class="works-list">
    <li class="card"><h4>One</h4><p>School</p><div></div></li>
    <li class="card"><h4>Two</h4><p>Home</p><div></div></li>
    <li class="card"><h4>Three</h4><p>Neighbor</p><div></div></li>
</ul>

$(".card").hover(
    function() {
        $(".card h4").toggleClass("work-active anime-white");
        $(".card p").toggleClass("work-active-sub anime-white");
        $(".card .blue-line").toggleClass(" blue-line-hover");
 });

1 ответ 1

1

Так?

 $(".works-list .card").hover(function(){
        $(this).find('.h4').toggleClass("work-active anime-green");
         $(this).find('.p').toggleClass("work-active anime-red");
    });
.anime-red {color:red;}
.anime-green {color:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="works-list">
    <li class="card"><h4 class="h4">One</h4><p class="p">School</p><div></div></li>
    <li class="card"><h4 class="h4">Two</h4><p class="p">Home</p><div></div></li>
    <li class="card"><h4 class="h4">Three</h4><p class="p">Neighbor</p><div></div></li>
</ul>

3
  • К сожалению нет, $(this) применяется тут к самому li, как и стили анимации, а мне нужно что бы они срабатывали к (".card h4"), (".card p"), (".card .blue-line") То есть, - к другим элементам, но при наведении на каждый из списка пункт li
    – YARA SUN
    6 фев 2018 в 16:42
  • переделал насколько понял
    – Dias
    6 фев 2018 в 16:57
  • Да, чувак, спасибо большое. Через .(find) теперь буду знать что можно так... В строку делать. ps h4 и p - классом)))
    – YARA SUN
    6 фев 2018 в 17:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.