Jquery 用于选择子项的此参数不工作
Jquery this parameter for selecting child not working
我一直在尝试更改鼠标悬停时的图像源,但是我可以使用具有 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
重新创建相同的效果
除了更改图像,您提供的 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;
}
我一直在尝试更改鼠标悬停时的图像源,但是我可以使用具有 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
重新创建相同的效果除了更改图像,您提供的 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;
}