求助：使用jQuery修改列表内空白input:hover的背景色

没问题，这个需求完全可以通过jQuery配合CSS实现！我来给你一步步拆解方案：

核心思路 #

先识别出列表项中值为空的输入框，给它们添加一个自定义类名，然后通过CSS针对这个类的hover状态设置特定背景色，就能区分空白和非空白输入框的hover效果了。

代码实现 #

1. jQuery 逻辑（识别并标记空白输入框）

// 页面加载完成后初始化
$(document).ready(function() {
  // 遍历所有列表内的输入框，标记初始为空的
  $('li input').each(function() {
    if ($.trim($(this).val()) === '') {
      $(this).addClass('empty-input');
    }
  });

  // 监听输入框内容变化，实时更新标记
  $('li input').on('input', function() {
    const inputVal = $.trim($(this).val());
    if (inputVal === '') {
      $(this).addClass('empty-input');
    } else {
      $(this).removeClass('empty-input');
    }
  });
});

2. CSS 样式（设置hover背景色）

/* 针对标记的空白输入框设置hover样式 */
li .empty-input:hover {
  background-color: pink;
  /* 如果原有样式优先级更高，可以加上!important，或者调整选择器权重 */
  /* background-color: pink !important; */
}

额外说明 #

• 用$.trim()是为了排除输入框只有空格的情况，确保真正的空白才会被标记。
• 监听input事件是为了处理用户动态输入/清空的场景，保证样式实时生效。
• 你提到的那个网站的棕色背景问题，用同样的思路就能解决——给空白输入框单独设置hover背景，覆盖原有样式即可。

内容的提问来源于stack exchange，提问作者verlager