jQuery此参数用于选择不起作用的孩子

Question

I've been trying to change image source on hover, however i can use mousehover function with class name and do this. The challenge here is i'm going to dynamically call more divs with same class name so i'm trying to achieve this using the this method. for some unknown reason i couldn't execute my below code. can anyone suggest what seems to be the problem? Pasting my code below

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

Both the alerts are working fine just the inbetween 2 lines are not working. i want to achieve this effect like moca tucson site's contact page https://moca-tucson.org/contact/ I'm trying to recreate the same effect using Jquery

Answer 1

Apart from changing the image, the link that your provided also uses CSS transitions to bring that "image transition" effect.

Here's the similar effect with just CSS, without any 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;
}