单击使用jQuery时更改背景图像

Question

因此，我有一个未按下的按钮图像。 我希望网站显示未推送的图像。 当用户单击按钮时，它会显示按下的按钮图像，然后在释放单击时返回到未按下的图像。

HTML

<div class="button"></div>

CSS

.button{
background-image: url("images/btn-unclicked.png");
width:210px;
height:210px;}

jQuery的

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$(function() {
$('.button').click(function() {
$(this).css('background-image', 'url(/images/btn-clicked.png)');
});
}):
</script>`

然后，当用户释放点击时，它应该返回到btn-unclicked图片。 上面的代码不起作用。 我知道释放点击后，我没有什么可恢复到原始图像的功能-但即使最初更改图像的第一部分也无法正常工作。

Answer 1

解决方案只是在CSS中使用.button：active类而不是jQuery。

Answer 2

您正在使用click（）鼠标事件，如您所述，每次按下和释放鼠标按钮时都会执行该事件。

我建议将isherwood的注释作为获得您想要的效果的最佳方法，但是如果您希望使用jQuery，则可以使用内置的鼠标事件来处理您正在谈论的内容：

当您用鼠标单击时，将发送mousedown（） 。

释放点击时将发送mouseup（） 。

希望能有所帮助。

Answer 3

.button {
    background: url(http://placehold.it/80x50);
}
.button:active {
    background: url(http://placehold.it/80x50/ff0000);
}

演示