javascript - 通过 Javascript 创建动态 :hover 伪类

Question

看了这个问题后，我想知道如何做相反的事情。

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

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

提前致谢

Answer 1

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

Answer 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');
}

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