As a newcomer to jQuery, I'm attempting to apply a specific class to an individual image when hovering over a button. However, my initial approach did not yield the desired result.
The issue is that there are multiple .service sections, each containing its own .service button. Consequently, when I hover over a button, all the .service-image elements are affected simultaneously. I had hoped to rectify this by utilizing $(this) or find(), but I am struggling to find the right solution...
$(".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>