html - 我需要一些关于动态设置悬停 BG 的说明

Question

这是我的代码:

function recordStarted() {
$("#red_button").css("background","url(stop.png)");
$("#red_button").css("background-repeat","no-repeat");

$("#red_button:hover").css("background","url(stop-hover.png)");
$("#red_button:hover").css("background-repeat","no-repeat");
}

我已经通过第二行设置了 div 层的背景，但是当我尝试设置悬停背景时，它就变成了背景。我将如何动态设置 :hover 背景？

CSS:

.red_button 
{
background:url(record.png);
padding: 19px 251px;
cursor: pointer;
background-repeat: no-repeat;
}

.red_button:hover 
{
background:url(record-hover.png);
cursor: pointer;
background-repeat: no-repeat;
}

Answer 1

这就是 jQuery。 :hover 不是 jQuery 选择器的一部分。你可以在 css 中做到这一点。但是如果你出于某种原因决定在其中做 jQuery，你应该做的是将 stop.png 的背景图像分配给你的 css 到#red_button。然后也添加到您的 css #red_button.hover 并将其他图像分配给它作为背景。然后在 jQuery 中使用

$("#red_button").hover(function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  });
});