我需要一点关于动态设置悬停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中做到这一点。但是如果你出于某种原因决定要在其中做些什么，那么你应该做的就是将stop.png to #red_button的背景图像分配给你的css。然后添加到您的css #red_button.hover中，并将另一个图像指定为背景。然后在jQuery中使用

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

Answer 2

您可以简单地使用css来完成此操作：

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

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

Answer 3

你不需要javascript来做这件事，只需要css就可以了。我建议使用css精灵系统，这样当按钮悬停在上面时就不需要下载第二个图像，这可能会导致按钮在加载悬停图像时消失一段时间。

本质上，使用CSS Sprite，您将拥有一个同时包含默认状态和悬停状态的图像，然后按钮将像窗口一样操作，从而根据状态使用background-position CSS属性将图像的正确部分移动到视图中。

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

查看下面的教程，了解更多关于CSS spiriting的信息。

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