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

Demo

单击使用jQuery更改背景图像

3 个答案: