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

我一直在尝试更改悬停时的图像源代码，但我可以使用类名为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网站的联系人页面一样

---

除了更改图像之外，我还尝试使用Jquery重新创建相同的效果，您提供的链接也用于带来“图像转换”效果

这里的效果与CSS相似，没有任何javascript

HTML:

---

也请分享你的html，这样我们就可以看一看了，

alert

意味着你松开了

mouseOver

。尝试

console.log

嘿，伙计！谢谢你的例子。是的，我知道他们是如何在那个参考网站上工作的。所以实际上，当我使用第一个或最后一个孩子的css是不工作的，所以我添加了一个类手动到第一个和第二个图像和代码现在工作。再次感谢你的帮助，伙计，你的方法让我找到了确切的答案。请找到我下面的工作代码。pic_div img.img_hover{opacity:0；}。pic_div:hover img.img_normal{opacity:0；}。pic_div:hover img.img_hover{opacity:1；}明白了，很高兴它起作用了。请注意，在我的示例中，惟一的div中只有2个img元素，因此它将适用于将来试图找到解决方案的任何人。这里有一张给你看的照片。

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

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;
}