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层的背景，但是当我尝试设置悬停背景时，它就变成了背景。我将如何动态设置：悬停背景？

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

您可以简单地使用css来执行此操作：

#red_button {
  background: "url(stop.png)";
  background-repeat: no-repeat;
}

#red_button:hover {
  background: "url(stop-hover.png)";
}

Answer 2

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

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

Answer 3

您不需要javascript来执行此操作，只需要css即可。我建议使用css sprite系统，以便在按钮悬停时不需要下载第二个图像，这可能会导致按钮在加载悬停图像时显示消失片刻。

基本上使用CSS Sprites，您将拥有一个包含彼此相邻的默认状态和悬停状态的图像，然后该按钮将像窗口一样操作，从而使用{{1将图像的正确部分移动到视图中CSS属性取决于状态。

（我知道每个人都讨厌W3Schools，但这是一个基本概念的好教程）

查看以下教程，了解有关CSS精神的更多信息。

http://www.w3schools.com/css/css_image_sprites.asp

我需要对动态设置悬停BG进行一些澄清

3 个答案: