如何为Tampermonkey注入脚本内的按钮添加:hover与:active状态效果

嗨，我来帮你搞定这个问题～ 你现在遇到的核心卡点是：CSS伪类（像:hover、:active这类）没法通过元素的style行内属性直接设置，必须用CSS选择器规则来定义才行。结合你用Tampermonkey写脚本的场景，我给你推荐两种最实用的解决方案，完全贴合你的代码逻辑来改：

方法一：用Tampermonkey专属的GM_addStyle定义样式（推荐） #

Tampermonkey自带了GM_addStyle这个API，专门用来给脚本注入独立的CSS样式，不会污染页面其他元素，非常适配咱们的场景。

步骤1：先在脚本开头定义按钮的样式规则（包含伪类效果）

把这段代码加在你脚本的最开头（循环创建按钮的代码之前）：

// 注入按钮的基础样式与伪类交互效果
GM_addStyle(`
.diep-lobby-btn {
  padding: 5px;
  border: 1px solid black;
  cursor: pointer; /* 鼠标移上去显示手型，提升交互体验 */
  transition: all 0.2s ease; /* 加个平滑过渡，状态切换不生硬 */
}

.diep-lobby-btn:hover {
  filter: brightness(1.1); /* hover时轻微提亮背景 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 加阴影增强层次感 */
}

.diep-lobby-btn:active {
  filter: brightness(0.9); /* 按下时轻微变暗，模拟按压质感 */
  transform: translateY(1px); /* 按下时向下位移1px，更有真实感 */
}
`);

步骤2：修改按钮创建代码，给按钮绑定自定义类名

把你原来设置行内padding、border的代码删掉，换成给按钮添加我们定义好的类名，同时保留动态背景色的设置（因为每个按钮的背景色可能不一样）：

for (let region of data) {
  for (let lobby of region.lobbies) {
    let button = document.createElement('button');
    button.textContent = `${region.region} ${lobby.gamemode} ${lobby.numPlayers}p`;
    button.addEventListener('click', () => {
      window.open(`https://diep.io/?ip=${lobby.ip}&g=${lobby.gamemode}&l=0x0`)
    });
    
    // 关键：给按钮加自定义类名，应用我们写好的样式规则
    button.classList.add('diep-lobby-btn');
    // 保留动态背景色的行内设置（这部分是每个按钮独有的）
    button.style.backgroundColor = colors[region.region] || "rgba(255, 255, 255, 0.5)";
    
    buttons.appendChild(button);
  }
  let br = document.createElement('br');
  buttons.appendChild(br);
}

方法二：动态创建style元素插入页面（通用方案，不依赖Tampermonkey API） #

如果你不想用Tampermonkey的专属API，也可以手动创建一个style元素插入到页面的head里，效果完全一致：

// 动态创建style元素并插入页面
const styleEl = document.createElement('style');
styleEl.textContent = `
.diep-lobby-btn {
  padding: 5px;
  border: 1px solid black;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diep-lobby-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.diep-lobby-btn:active {
  filter: brightness(0.9);
  transform: translateY(1px);
}
`;
document.head.appendChild(styleEl);

之后的按钮创建逻辑和方法一的第二步完全一样，给按钮加diep-lobby-btn类名即可。

额外小提示 #

你可以根据自己的喜好随意调整伪类里的样式：比如把filter: brightness()换成直接修改background-color，或者给:active加个边框粗细变化，怎么好看怎么来～ 另外加个transition过渡动画，能让状态切换更丝滑，不会显得突兀。

内容来源于stack exchange