请求协助：匹配按钮与输入框悬停状态颜色及新增文本颜色调整

首先咱们一步步来解决你的问题——先让按钮hover颜色和输入框对齐，再搞定新增文本的颜色显示，结合你已经写的jQuery代码来调整：

1. 匹配按钮Hover颜色与输入框 #

要实现按钮hover时和输入框颜色一致，推荐两种更稳妥的方式：

方式一：复用CSS类（最推荐，易维护） #

如果你的输入框是靠CSS类来定义hover样式的（比如输入框有.form-input类，hover样式写在.form-input:hover里），直接给按钮添加这个类就行，按钮会自动继承输入框的所有hover样式：

// 给按钮添加输入框的样式类，自动匹配hover颜色
$('button').addClass('form-input');

后期如果要调整颜色，只需要改CSS，不用动JS代码，非常方便。

方式二：动态获取输入框hover颜色并应用 #

如果输入框的hover颜色是内联样式或者无法通过类复用，就动态获取它的计算样式，再给按钮绑定hover事件：

// 获取输入框hover时的背景色（如果要匹配文本色就换成'color'）
const inputHoverColor = $('input:hover').css('background-color');

// 给按钮设置hover状态的颜色
$('button').hover(
  function() {
    $(this).css('background-color', inputHoverColor);
  },
  function() {
    // 鼠标离开时恢复按钮原颜色
    $(this).css('background-color', '');
  }
);

2. 修复新增文本的颜色 #

你已经插入了#list和#uList元素，要让里面的文本显示正确颜色，同样有两种方式：

方法一：通过CSS类控制（推荐） #

先在页面的CSS里定义好文本颜色的类：

.normal-text-color {
  color: #333; /* 替换成你需要的颜色，比如和输入框文本一致的颜色 */
}

然后在插入元素时直接添加这个类：

// 你的原有代码基础上添加类
$('#webform-container').css('float','right'); 
$("<div id=list class='normal-text-color'></div>").insertBefore("#webform-container").css({
  'float':'left',
  'width':'500px'
}); 
$("<ol id='uList' class='normal-text-color'></ol>").appendTo('#list');

方法二：直接用jQuery设置颜色 #

如果不想加CSS类，也可以在插入元素时直接指定颜色：

$('#webform-container').css('float','right'); 
$("<div id=list></div>").insertBefore("#webform-container").css({
  'float':'left',
  'width':'500px',
  'color':'#你的目标颜色' // 替换成实际需要的颜色值
}); 
$("<ol id='uList'></ol>").appendTo('#list').css('color','#你的目标颜色');
// 如果列表项颜色也要一致，继续设置
$('#uList li').css('color','#你的目标颜色');

整合后的完整代码示例（用CSS类方式） #

把上面的逻辑整合起来，最终代码大概是这样：

// 先让按钮匹配输入框hover颜色
$('button').addClass('form-input');

// 插入元素并设置文本颜色类
$('#webform-container').css('float','right'); 
$("<div id=list class='normal-text-color'></div>").insertBefore("#webform-container").css({
  'float':'left',
  'width':'500px'
}); 
$("<ol id='uList' class='normal-text-color'></ol>").appendTo('#list');

// 假设你要往列表里加内容，比如：
$('#uList').append('<li>新增的第一条内容</li>').append('<li>新增的第二条内容</li>');

小提示：如果不知道输入框的CSS类名，可以打开浏览器开发者工具（F12），选中输入框查看它的类哦~

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