Выбор * конкретного * элемента в jQuery

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-image вы пытаетесь цели (т.е. они оба имеют один и тот же .service родителя), вы можете использовать siblings(). Указав переключатель .service-image в функции siblings(), вы можете быть уверены, что только когда-либо нацеливаете .service-image внутри элемента .service.

$('.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

Try:

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

Ваше мышление было правильно, и как кнопки и специфический image share the same parent.