通过Javascript创建动态：悬停伪类

看了之后，我想知道怎么做这个网站

我已经为我要创建的按钮创建了一个主类，对于每个按钮，我将通过

myButton.style.backgroundImage

设置不同的背景。但是，我还需要设置和单独的背景：为每个不同的按钮悬停

如何通过Javascript访问：hover伪类以添加特定背景

---

提前感谢

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

CSS的一个特性是：hover伪类

因此，您可以在样式表中添加

.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");
  }
);

---

不要使用

myButton.style.backgroundImage

设置背景图像，而是为每个按钮添加单独的类，例如

firstButton.className+='first button'

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

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

---

谢谢，我对jQuerry还不熟悉，但那是个不错的选择。我想我会通过javascript事件来处理这个问题，尽管我也必须考虑触摸事件。谢谢你的建议，但我对此不太感兴趣，我正在制作一个游戏并改变场景，所以我宁愿动态地创建东西。在我看来，游戏中的每一个元素都有一个巨大的CSS库。