如何使用 jQuery 实现点击列表项时背景色和图标变白的效果？

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 实现点击列表项时背景色和图标变白的效果？的详细内容，更多请关注其它相关文章！