jQuery此參數用於選擇不起作用的孩子

Question

我一直試圖在懸停時更改圖像源，但是我可以將mousehover函數與類名一起使用並執行此操作。 這里的挑戰是我將動態調用具有相同類名的更多div，因此我試圖使用this方法來實現這一點。 由於某些未知原因，我無法執行以下代碼。 誰能建議似乎是問題所在？ 在下面粘貼我的代碼

  $(".img_staff").mouseover(function() {
    alert(2);
    $(this).find('.staffimg:first-child').css("display","none");
    $(this).find('.staffimg:nth-child(2)').css("display","block");
    alert(3);
  });

兩條警報都正常，只是其中兩行之間不起作用。 我想實現這種效果，例如moca tucson網站的聯系頁面https://moca-tucson.org/contact/我正在嘗試使用Jquery重新創建相同的效果

Answer 1

除了更改圖像，您提供的鏈接還使用CSS過渡來帶來“圖像過渡”效果。

這只是CSS，沒有任何javascript的類似效果。

HTML：

<div>
    <img src="https://moca-tucson.org/wp-content/uploads/2017/05/Ginger_Staff_Photos_001-800x800.jpg">
    <img src="https://moca-tucson.org/wp-content/uploads/2017/05/Ginger_Staff_Photos_002-800x800.jpg">
</div>

CSS：

div img:last-child { opacity: 0 }
div:hover img:first-child { opacity: 0 }
div:hover img:last-child { opacity: 1 }
img {
    position: absolute;
    transition: 0.3s;
}