通过链接替换精灵图像

我希望默认情况下在div中显示我的精灵的一部分，然后在div下方有一个文本菜单，当点击不同的链接时，显示的精灵部分会发生变化。

这是我到目前为止的地方，并让我的精灵全部显示以下内容：

指数

CSS

 .sprite { background-image: url(sprite1.png); background-repeat: no-repeat; display: block; } .sprite-caramel { width: 176px; height: 250px; background-position: 0 0; } .sprite-chocolate { width: 176px; height: 250px; background-position: -176px 0; } .sprite-empty { width: 176px; height: 250px; background-position: -352px 0; } .sprite-strawberry { width: 176px; height: 250px; background-position: -528px 0; } .sprite-vanilla { width: 176px; height: 250px; background-position: -704px 0; } 

我想要做的是在div中默认显示“空”，然后在div下面有“chocolate”“vanilla”“strawberry”等文本链接。当点击链接时，精灵位置会变为反映点击链接的图像。

当我用谷歌搜索时，我似乎只能在hover时找到图像替换…

我是精灵100％新手，直到现在才使用它们。

Answer 1

好像你需要Javascript来完成工作。

HTML

  
 Caramel Chocolate Empty Strawberry Vanilla 

CSS

  .sprite { background-image: url(http://puu.sh/3orSM.png); background-repeat: no-repeat; display: block; width: 176px; height: 250px; } .sprite-caramel { background-position: 0 0; } .sprite-chocolate { background-position: -176px 0; } .sprite-empty { background-position: -352px 0; } .sprite-strawberry { background-position: -528px 0; } .sprite-vanilla { background-position: -704px 0; } 

Javascript – 需要jQuery

  jQuery(document).on("ready", function() { jQuery('.flavor').bind('click', function(e) { jQuery('#tumbler').attr('class', 'sprite sprite-' + jQuery(this).data('flavor')); e.stopPropagation(); }); }); 

示范

当然还有演示 。