0

这是我的代码：

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;
}
4

3 回答 3

0

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

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

#red_button:hover {
  background: "url(stop-hover.png)";
}
于 2013-03-06T02:36:39.837 回答
0

那是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");
  });
});
于 2013-03-06T02:42:07.470 回答
0

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

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

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

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

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

于 2013-03-06T02:55:32.447 回答