在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'); 
}); 

你的想法是正確的，因爲這兩個按鈕，具體的圖像共享同一個父級。