利用jQuery极简代码完成选中部分高亮显示效果

Wellfancy

于 2021-08-06 19:47:40 发布

阅读量1.3k

点赞数 13

分类专栏： jQuery 文章标签： javascript jquery 前端 html css

本文链接：https://blog.csdn.net/weixin_53379398/article/details/119462248

版权

本文介绍了如何使用jQuery通过极简代码实现网页元素的高亮选中效果。通过结合hover、siblings和stop()方法，避免了快速交互时浏览器的过度负担，确保了良好的用户体验。

摘要由CSDN通过智能技术生成

当我们在制作一个网页时，常常会有想要选中部分高亮的需求，那么怎么用jQuery的极简代码完成这件事呢？

可以看到，三个图片中，当我们的鼠标移到哪个上面，哪个就从中脱颖而出，其实这只需要一段非常简单的代码即可完成

$(function() {
//设置鼠标进入的时候,其他的li标签透明度：0.5
$(".wrap li").hover(function() {
$(this).siblings().stop().fadeTo(400, 0.5);
}, function() {
// 设置鼠标离开，其他li 透明度改为 1
$(this).siblings().stop().fadeTo(400, 1);
})

上段代码中的hover在上一篇文章中已经提到过，siblings也在之前的文章中提到过，这里就不过多阐述，这里我们主要注意一下stop（）的用法