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

Answer 2

尝试：

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

你的想法是正确的，因为这两个按钮，具体的图像共享同一个父级。