Почему эффект hover применяется ко всем элементам сразу, а не к каждому отдельно?

Question

[Сергей Бут]

<div class="wayWeWork 2" id="phase-1" data-aos="zoom-in-right" data-aos-easing="ease-in-out" data-aos-delay="100" data-aos-duration="800" data-aos-offset="0"><h4>Idea</h4><p class="article">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p><span class="number">1.</span></div>
                    <div class="wayWeWork 2" id="phase-2" data-aos="zoom-in-right"  data-aos-easing="ease-in-out" data-aos-delay="400" data-aos-duration="800" data-aos-offset="0"><h4>Design</h4><p class="article">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p><span class="number">2.</span></div>
                    <div class="wayWeWork 2" id="phase-3" data-aos="zoom-in-right"  data-aos-easing="ease-in-out" data-aos-delay="700"data-aos-duration="800" data-aos-offset="0"><h4>Output</h4><p class="article">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p><span class="number">3.</span></div>

$(document).ready(function(){
   
    $(".wayWeWork").hover(
        function () { 
            $(".wayWeWork>h4").animate({top: '20%',left: '5rem'},300, 'linear');
        },
        function() {
            $(".wayWeWork>h4").animate({top: '50%',left: '2rem'},300, 'linear');
        });
    });

Answer 1

[Александр]

Потому что вы выбираете все элементы сразу и к ним применяете.

Comments

[Сергей Бут]

А подскажите, как будет правильно?

[Сергей Бут]

Изминение стилей при наведение на отдельный елемент с класом .wayWeWork только у того элемента на который наводишь

[Александр]

так надо и обращаться к этому эелементу а не ко всем
$( this ).find("h4")
вместо
$(".wayWeWork>h4")

[Сергей Бут]

Александр, Большое спасибо)

Answer 2

[Henxed]

Сергей Бут, используйте this и потом find

$(".wayWeWork").hover(
  function () { 
    $(this).find("h4").animate({top: '20%',left: '5rem'},300, 'linear');
  },
  function() {
    $(this).find("h4").animate({top: '50%',left: '2rem'},300, 'linear');
});