在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>