jquery - 如何做这个渐进的悬停效果

标签 jquery html css hover

这是一个链接:http://www.45royale.com/work/

在他的页面上,当您将鼠标悬停在他完成的作品上时,鼠标悬停会很酷。它将图像替换为另一个图像。这是 jquery 还是 css?我怎样才能做到这一点?

最佳答案

jquery 以及两个单独的图像,在悬停时淡入和淡出。

您应该学习使用浏览器中可能内置的查看源代码/开发人员工具(尝试按 F12)。

相关代码如下:

$("div.casestudy img.hovered").hide();
$("div.casestudy").hover(function() {
$(this).find('img').fadeIn(200);
}, function() {
$(this).find('img.hovered').fadeOut(200);
});

http://www.45royale.com/wp-content/themes/45v6_sandbox/images/work/img_dww.jpg

http://www.45royale.com/wp-content/themes/45v6_sandbox/images/work/img_dww_hovered.jpg

关于jquery - 如何做这个渐进的悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10060966/

相关文章:

javascript - 将数据ajax传递到foreach laravel 5中的同一页面

html - JsonML 中如何表示未闭合的标签?

javascript - 如何使用 VueJS 在带有按钮的图片周围显示边框?

css - 如何让 <select> 显示内联?

javascript - Jquery Keypress 不适用于我的输入框

javascript - 为什么我的 .hover() 事件处理程序的 <li> 元素的颜色属性没有改变?

javascript - 单击包含标签的链接时,不要将标签添加到 URL

html - 如何使用 css 制作子子菜单?

jquery - 我如何修改 jQuery 循环插件以用于两个图像幻灯片而不是一个?

javascript - VIES 增值税号验证