Question

假设我的#button带有给定的背景图片：url（images / some_background），当我点击它时我想把它改成另一个背景，让我们说url（images / 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)');

        });

});

Answer 1

这对我有用

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脚本。
图片的路径正确无误。

Answer 2

可能会偏离主题，但你应该考虑使用精灵而不是2个完全独立的图像。

为什么呢？由于连接速度较慢，在某些浏览器上，点击事件会导致“闪烁”，因为新图像正在下载然后加载。 Sprites将保证图像已经加载，因此您只需要更改背景位置以“加载”新图像。

Answer 3

试试这个：

$（“＃button”）。css（“background-image”，“url（/images/otherbackground.png）”）;

OR

$（this）.css（“background-image”，“url（/images/otherbackground.png）”）;

单击自身更改按钮背景颜色

3 个答案: