更改按钮背景颜色点击本身

比方说，我有#button与给定的background-image：url（images/some_background），我想改变它到另一个背景，当我点击它，让我们说url（图像/ other_background）。更改按钮背景颜色点击本身

 HTML 

     <a id="button" ></a> 

     CSS 

    display: block; 
    height:100px; 
    width:100px; 
    background-image:url(images/other_background.png)

我尝试这样做，但它不工作：

$(document).ready(function(){ 

    $('#button').click(function(){ 

      $('#button').css('backgroundImage', 'url(images/other_background.png)'); 

     }); 

});

来源

2011-07-12 user461316

这对我的作品

CSS

#button{display: block; height:100px; width:100px; 
background-image:url(http://cheeptalk.files.wordpress.com/ 
2009/05/smurfs-hefty-smurf-100x100.png?w=96&h=96); border:1px solid red;}

边框更容易看到仅

代码

$('#button').click(function(){ 
    $(this).css('backgroundImage','url(http://images.mirror.co.uk/upl/m4/\ 
    feb2010/9/3/mr-t-100x100-938742195.jpg)'); 
});

http://jsfiddle.net/jasongennaro/Lvnmw/

很明显，您需要将图像切换为自己的图像。

如果您有问题，请检查

那你第一次调用jQuery脚本，该脚本之前。
图片的路径是正确的。

来源

2011-07-12 03:13:36

我认为他遇到的具体问题与他有关，并不妨碍他的超链接默认事件。在对一个被删除的答案发表评论时，他表示他将它改为了一个按钮，并且工作。 – djlumley

上面的评论钉了它。回到我的原始代码，它神奇地工作。还有一个问题，我将如何去永久更改按钮的背景图像，所以如果我重新加载页面，“other_background”会在那里。 – user461316

您可以使用HTML5本地存储（http://diveintohtml5.org/storage.html）来存储状态，然后在页面加载时查询该状态？ – djlumley

小有一点题外话，但你应该考虑使用，而不是完全2个图像独立精灵。

为什么？由于较慢的连接和某些浏览器，因为新图像正在下载并加载，点击事件将导致“闪烁”。精灵将会看到图像已经加载，所以你只需要改变背景位置来加载新图像。

来源

2011-07-12 02:46:04 Populus

设置精灵需要一些学习。但我同意，这是最好的选择 – kheya

试试这个：

$（ “＃键”），CSS（ “背景图片”， “URL（/images/otherbackground.png）”）;

$（本）的CSS（ “背景图片”， “URL（/images/otherbackground.png）”）;

来源

2011-07-12 02:49:10 kheya

更改按钮背景颜色点击本身

回答

相关问题