jQuery点击松开切换css样式及切换背景图

最新推荐文章于 2023-02-22 23:45:48 发布

原创最新推荐文章于 2023-02-22 23:45:48 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css

前端同时被 3 个专栏收录

8 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

css+div

1 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的签到按钮交互效果。当鼠标按下时，按钮背景色改变并显示高亮的树叶图标；鼠标弹起时，恢复原始背景色和图标。该效果适用于网页应用中增加用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function(){//点击切换签到按钮中的树叶及按钮背景颜色.

$(".attence_image").mousedown(function(){
$(this).parent().find("img").attr("src","../../img/签到_树叶高亮.png");
$(".attence_image").css("background-color","#7594EF");
});
$(".attence_image").mouseup(function(){
$(this).parent().find("img").attr("src","../../img/签到_树叶.png");
$(".attence_image").css("background-color","#5D82EC");
});

});

鼠标点击松开切换效果:

mousedown()mouseup()