如何用JavaScript修改CSS实现过渡？解决:hover选择器代码失效问题

你遇到的问题核心是：document.querySelector(".element:hover")无法选中目标元素——:hover是CSS伪类，代表元素的临时状态，而非DOM元素本身的固定选择器，JavaScript无法直接通过这种方式获取处于hover状态的元素。以下是几种可行的实现方式：

方法一：纯CSS实现（推荐） #

这是最简洁高效的方案，直接通过CSS伪类定义hover状态的样式，浏览器会自动处理状态切换：

.element:hover {
  background-color: red;
}

方法二：JavaScript监听鼠标事件 #

如果需要结合JS逻辑实现，可以通过监听mouseenter和mouseleave事件手动控制样式：

const targetElement = document.querySelector(".element");

// 鼠标移入时设置红色背景
targetElement.addEventListener("mouseenter", () => {
  targetElement.style.backgroundColor = "red";
});

// 鼠标移出时恢复原有背景（可根据需求调整为具体颜色）
targetElement.addEventListener("mouseleave", () => {
  targetElement.style.backgroundColor = "";
});

方法三：动态添加/移除CSS类（适合复杂样式） #

若hover状态包含多个样式，推荐用CSS类管理，便于后续维护：
首先定义CSS类：

.hover-bg-red {
  background-color: red;
  /* 可扩展添加其他hover样式，比如border、文字颜色等 */
}

然后通过JS切换类：

const targetElement = document.querySelector(".element");

targetElement.addEventListener("mouseenter", () => {
  targetElement.classList.add("hover-bg-red");
});

targetElement.addEventListener("mouseleave", () => {
  targetElement.classList.remove("hover-bg-red");
});

内容的提问来源于stack exchange，提问作者Gee-on-woo