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 transitions带来“图像过渡”效果。

这只是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此参数用于选择不起作用的孩子

1 个答案: