jquery 改变列表项目样式
为了实现点击列表项（li）时其背景色和图标变白的效果，我们可以使用 jquery 代码。
首先，我们可以将 css 样式应用于 li 元素：
.ser_ul li { float: left; height: 40px; line-height: 40px; border: 1px solid #c4dbed; border-bottom: none; text-align: center;}
登录后复制
然后，使用 jquery 来处理点击事件：
$('.ser_ul li').click(function() { // 将所有 li 的背景色和图标恢复为默认样式 $('.ser_ul li').css('background-color', 'white'); $('.ser_ul li img').css('opacity', '0.2'); // 将当前点击的 li 的背景色和图标设置为白色 $(this).css('background-color', '#557fb9'); $(this).find('img').css('opacity', '1');});
登录后复制
此代码将为点击的 li 元素设置样式，并恢复其他 li 元素的默认样式。
此外，可以添加悬停事件来在鼠标悬停在 li 上时更改样式：
$('.ser_ul li').hover(function() { $(this).css('background-color', '#557FB9'); $(this).find('img').css('opacity', '1');}, function() { $(this).css('background-color', 'white'); $(this).find('img').css('opacity', '0.2');});
登录后复制
以上就是如何使用 jQuery 实现点击列表项时背景色和图标变白的效果？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2660325.html
