这里演示一个使用jQuery实现的品牌展示列表 hover效果:HTML代码如下:
html <ul class="brand-list"> <li><img src="img/brand1.png" ></li> <li><img src="img/brand2.png" ></li> <li><img src="img/brand3.png" ></li> <li><img src="img/brand4.png" ></li> <li><img src="img/brand5.png" ></li> </ul>
CSS代码如下:
css .brand-list { list-style: none; display: flex; justify-content: space-between; } .brand-list li { position: relative; } .brand-list li img { width: 100px; border-radius: 10px; } .brand-list li:hover .mask { opacity: 1; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; border-radius: 10px; transition: opacity 0.3s ease; } .mask i { color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
JavaScript代码如下:
js $('.brand-list li').hover(function() { $(this).append('<p class="mask"><i class="fas fa-link"></i></p>') }, function() { $(this).find('.mask').remove(); });
实现效果: 当鼠标悬停在品牌图片上时,会展示一个黑色半透明的遮罩层,遮罩层的中心显示链接图标,产生提示用户点击的效果。
该效果运用了jQuery的 hover()方法绑定鼠标悬停和离开两种事件,在悬停事件中动态追加了mask遮罩层,在离开事件中移除遮罩层,产生动态效果。
© 版权声明
本文刊载的所有内容,包括文字、图片、音频、视频、软件、程序、以及网页版式设计等部门来源于互联网,版权均归原作者所有!本网站提供的内容服务于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯本网站及相关权利人的合法权利。
联系信息:邮箱aoxolcom@163.com或见网站底部。
联系信息:邮箱aoxolcom@163.com或见网站底部。
THE END
请登录后发表评论
注册
社交帐号登录