在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

嘗試：

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

您的想法是對的，因為按鈕和特定圖像共享同一個父級。

Answer 2

由於<button>元素是您嘗試定位的.service-image的兄弟（即它們都共享相同的.service父級），因此您可以使用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>