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 实现点击列表项时背景色和图标变白的效果？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
581
收藏
