Jquery 用于选择子项的此参数不工作

Question

我一直在尝试更改鼠标悬停时的图像源，但是我可以使用具有 class 名称的鼠标悬停功能来执行此操作。这里的挑战是我将动态调用更多具有相同 class 名称的 div，因此我尝试使用此方法实现此目的。由于某些未知原因，我无法执行下面的代码。任何人都可以提出似乎是什么问题吗？在下面粘贴我的代码

  $(".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

除了更改图像，您提供的 link 还使用 CSS transitions 来实现 "image transition" 效果。

这里有类似的效果，只有 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;
}

Jquery 用于选择子项的此参数不工作

Jquery this parameter for selecting child not working

javascript

jquery

html

mouseevent

this