如何在hover状态下沿用已有CSS类样式，避免被其他样式覆盖？

因为你无法修改现有样式表，只能通过JS控制元素，这里有两种可靠的方案：

方案一：动态插入高优先级hover样式规则 #

利用CSS选择器优先级，.custom-class:hover（类+伪类，特异性0,1,1）的优先级高于默认的a:hover（元素+伪类，特异性0,0,1），我们可以通过JS把当前.custom-class的样式复制到它的hover伪类规则中，插入到页面样式里：

// 获取目标元素（多个元素的话改用querySelectorAll遍历）
const targetEl = document.querySelector('.custom-class');
if (!targetEl) return;

// 获取元素的计算样式
const computedStyle = getComputedStyle(targetEl);
// 列出需要保留的样式属性，根据实际需求调整
const styleProps = ['color', 'backgroundColor', 'textDecoration', 'border', 'padding'];

// 构建hover样式规则
let hoverCss = '.custom-class:hover {';
styleProps.forEach(prop => {
  const value = computedStyle[prop];
  if (value) {
    // 把驼峰式属性转为CSS连字符格式
    const cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
    hoverCss += `${cssProp}: ${value}; `;
  }
});
hoverCss += '}';

// 创建style标签并插入到页面头部
const styleTag = document.createElement('style');
styleTag.textContent = hoverCss;
document.head.appendChild(styleTag);

这个方案只需要执行一次，就能让所有带.custom-class的元素在hover时保持原类样式，无需重复触发事件。

方案二：通过鼠标事件手动控制内联样式 #

如果只需要针对单个元素，也可以监听鼠标进出事件，直接设置内联样式（内联样式优先级最高，会覆盖任何外部样式）：

const targetEl = document.querySelector('.custom-class');
if (!targetEl) return;

// 提前获取.custom-class的计算样式
const baseStyle = getComputedStyle(targetEl);

// 鼠标进入时应用基础样式
targetEl.addEventListener('mouseenter', () => {
  targetEl.style.color = baseStyle.color;
  targetEl.style.backgroundColor = baseStyle.backgroundColor;
  targetEl.style.textDecoration = baseStyle.textDecoration;
  // 按需添加其他样式属性
});

// 鼠标离开时清除内联样式，恢复默认状态
targetEl.addEventListener('mouseleave', () => {
  targetEl.style.color = '';
  targetEl.style.backgroundColor = '';
  targetEl.style.textDecoration = '';
});

注意：确保这些JS代码在元素被添加到DOM之后执行，比如在VS Code Webview的DOM加载完成回调里运行。

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