[英]Jquery this parameter for selecting child not working
我一直试图在悬停时更改图像源,但是我可以将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重新创建相同的效果
除了更改图像,您提供的链接还使用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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.