通过 Javascript 创建动态 :hover 伪类答案

【问题标题】：Creating a dynamic :hover pseudoclass throught Javascript通过 Javascript 创建动态 :hover 伪类
【发布时间】：2012-12-04 13:42:16
【问题描述】：

看了this question之后，我想知道怎么做对面。

我已经有一个要创建的按钮的主类，对于每个按钮，我将通过myButton.style.backgroundImage 设置不同的背景。但是我还需要在 :hover 上为我拥有的每个不同按钮设置单独的背景。

如何通过Javascript访问:hover伪类来添加特定背景？

提前致谢

【问题讨论】：

标签： javascript html css pseudo-class

【解决方案1】：

您可以添加伪类 CSS（例如，通过在 JS 中编写文档）或者您可以使用 Javascript 事件来设置悬停时的背景图像（mouseenter/mouseleave）。伪类是自动调用的，不幸的是，无法手动“激活”它甚至“访问”它以进行样式修改。

【讨论】：

【解决方案2】：

不要使用myButton.style.backgroundImage设置背景图片，而是为每个按钮添加一个单独的类，例如firstButton.className += ' first-button'

然后，您可以在 CSS 中为每个按钮设置两种状态的样式：

.first-button {
    background-image: url('first.png');
}  
.first-button:hover {
    background-image: url('first_hovered.png');
}

【讨论】：

感谢您的建议，但我对此并不感兴趣，我正在制作游戏并更改场景，因此我宁愿动态地创建事物。游戏中的每个元素都有一个庞大的 CSS 库，这对我来说似乎是压倒性的。

【解决方案3】：

:hover 伪类是 CSS 的一个特性。

所以你可以在你的样式表中添加。

.myButtonClass1:hover {background: red;}
.myButtonClass2:hover {background: blue;}

如果你真的想使用javascript，假设你有可用的jQuery，你可以使用

$(".myButtonClass1").hover(
  function () {
    $(this).css("background", "red");
  },
  function () {
    $(this).css("background", "none");
  }
);

$(".myButtonClass2").hover(
  function () {
    $(this).css("background", "blue");
  },
  function () {
    $(this).css("background", "none");
  }
);

【讨论】：

谢谢，我还不熟悉 jQuerry，但那将是一个不错的选择。我想我会通过 javascript 事件来处理它，即使我也必须考虑触摸事件。