Question

在查看this question之后，我想知道如何做对话。

我已经有一个我要创建的按钮的主类，对于每个按钮，我将通过myButton.style.backgroundImage设置不同的背景。但是我还需要设置和个人背景：悬停我的每个不同的按钮。

如何通过Javascript访问：hover pseudoclass来添加特定的背景？

提前致谢

Answer 1

请勿使用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 2

您可以添加伪类CSS（例如，通过document.write将其添加到JS中），或者您可以使用Javascript事件在悬停时设置backgroundImage（mouseenter / mouseleave）。自动调用伪类，不幸的是，没有办法手动“激活”它甚至“访问”它以进行样式修改。

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

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

3 个答案: