制作精灵图像播放/暂停图标突出显示

我已经完成了所有的CSS工作，并且精灵的工作非常完美。问题我有，我有一个播放和一个暂停图标。

它们是灰色的正常状态，粉红色悬停。但是当他们被点击时，我希望他们变成粉红色。我的问题是这样的：

当页面加载时，图像滑块自动播放，所以我想播放按钮自动PINK。然后，如果用户点击PAUSE按钮，我希望PAUSE按钮变成粉红色，PLAY按钮变成灰色！

然后反之亦然，因为当用户点击播放，该按钮会变成粉红色和暂停按钮变灰

我不知道如何做到这一点作为正规的CSS我肯定无法做到这一点对自己。

CSS：

div.play { width: 12px; height: 17px; background: url(../images/icons/slider-controls.png) no-repeat 0 -181px; } 
div.pause { width: 18px; height: 16px; background: url(../images/icons/slider-controls.png) no-repeat 0 -121px; } 
div.play:hover { width: 12px; height: 17px; background: url(../images/icons/slider-controls.png) no-repeat 0 -204px; } 
div.pause:hover { width: 18px; height: 16px; background: url(../images/icons/slider-controls.png) no-repeat 0 -143px; }

HTML：

<a href="javascript:;"><div class="pause left" id="my-start-stop"></div></a> 
       <a href="javascript:;"><div class="play left" id="my-stop-start"></div></a>

JS：（对于对照）

$('#my-start-stop').click(function() { 
      slider.stopShow(); 
      return false; 
     }); 
     $('#my-stop-start').click(function() { 
      slider.startShow(); 
      return false; 
     });

图片Sprite是： enter image description here

来源

2011-04-25 422

哎呀，我读了DIV ID名称一样......该死的诵读困难LOL ...无论如何，我改变了名称，并提出了demo，代码如下：

HTML

<a href="javascript:;"><div class="pause left" id="my-pause"></div></a> 
<a href="javascript:;"><div class="play playing left" id="my-play"></div></a>

CSS

div.play, div.pause { 
    float: left; 
    background: url(http://i.stack.imgur.com/lqK28.png) no-repeat; 
} 
div.play { 
    width: 12px; 
    height: 17px; 
    background-position: 0 -181px; 
} 
div.pause { 
    width: 18px; 
    height: 16px; 
    background-position: 0 -121px; 
} 
div.play.playing, div.play:hover { 
    width: 12px; 
    height: 17px; 
    background-position: 0 -204px; 
} 
div.pause.paused, div.pause:hover { 
    width: 18px; 
    height: 16px; 
    background-position: 0 -143px; 
}

脚本

$('#my-pause').click(function() { 
    $(this).toggleClass('paused'); 
    $('.play').removeClass('playing'); 
    slider.stopShow(); 
    return false; 
}); 
$('#my-play').click(function() { 
    $(this).toggleClass('playing'); 
    $('.pause').removeClass('paused'); 
    slider.startShow(); 
    return false; 
});

来源

2011-04-25 23:18:58 Mottie

绝对血腥完美，非常感谢:) – 422 2011-04-25 23:42:17

而不是使用:hover只是定义一个CSS类来移动背景位置。

像：

.play { 
    background: url(../images/icons/slider-controls.png) no-repeat 0 -200px; 
} 
.active { 
    background-position: 0 -100px; 
}

然后，只需添加/删除active类的JavaScript

而且，因为你必须为所有按钮一个精灵，你可以写你的CSS像这样：

然后你分配类如：

<div class="sprite play"></div>

和

<div class="sprite pause pause_active"></div><!-- pause AND pause_active -->

来源

2011-04-25 23:11:00 Halcyon

干杯@Frits，现在就玩这个吧。谢谢（会回报） – 422 2011-04-25 23:18:09

制作精灵图像播放/暂停图标突出显示

回答

相关问题