jQueryの* specific *要素を選択する

Question

私はjQueryを初めて使用しています。ボタン上にマウスを移動することで個々の画像にクラスを追加したいと思います。 。

私はいくつかの問題があります。.serviceセクションにはそれぞれ独自の.service buttonがあります。したがって、最終結果は期待どおりです。ボタンの上にマウスを移動すると、すべて.service-imageが影響を受けます。私は$(this)またはfind()しかしを使用して、私はこの問題を解決できると思っていた私...フィギュアそれをちょうどカント

$(".service button").hover(function() { 
 
    $(".service-image").toggleClass("raise"); 
 
});

.raise { 
 
    transform: translateY(-10px); 
 
    transition: all 0.2s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="service home-service1"> 
 
    <div class="service-image"> 
 
    <img src="images/phone.png" alt="" /> 
 
    </div> 
 
    <div class="service-title"> 
 
    <h2>Kiosk Renovation</h2> 
 
    </div> 
 
    <div class="service-text"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat quam sit amet vehicula auctor. Aliquam vel orci hendrerit, vestibulum ligula laoreet, faucibus mi.</p> 
 
    </div> 
 
    <button class="outline-on-dark">Explore</button> 
 
</div>

Answer 1

<button>要素は、あなたが（すなわち、それらは同じ.service親を共有する両方の）ターゲットにしようとしている.service-image、あなたがsiblings()を使用できるの兄弟なので。 siblings()機能で.service-imageセレクタを指定すると、.service要素内の.service-imageのみをターゲットにすることができます。

$('.service button').hover(function() { 
 
    $(this).siblings('.service-image').toggleClass('raise'); 
 
});

.raise { 
 
    transform: translateY(-10px); 
 
    transition: all 0.2s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="service home-service1"> 
 
    <div class="service-image"> 
 
    <img src="images/phone.png" alt="" /> 
 
    </div> 
 
    <div class="service-title"> 
 
    <h2>Kiosk Renovation</h2> 
 
    </div> 
 
    <div class="service-text"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat quam sit amet vehicula auctor. Aliquam vel orci hendrerit, vestibulum ligula laoreet, faucibus mi.</p> 
 
    </div> 
 
    <button class="outline-on-dark">Explore</button> 
 
</div>

Answer 2

試してみてください。

$('service button').on('hover', function(e){ 
    $(this).siblings('.service-image').toggleClass('raise'); 
}); 

あなたの思考は、ボタンとの両方として、正しかったです特定のイメージは同じ親を共有します。