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

Question

我正在制作幻灯片查看器。

我让所有的CSS工作得很完美，精灵工作得很完美。 问题是，我有一个播放和暂停图标。

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

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

反之亦然，当用户点击PLAY时，此按钮会变为PINK并暂停按钮GRAYED

我不确定如何做这个普通的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;
        });

Image Sprite是：

Answer 1

哎呀，我把div ID名称看作同样的... darn dyslexia 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;
});

Answer 2

不要使用:hover，而只需定义一个移动背景位置的CSS类。

像：

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

然后使用JavaScript添加/删除active类

此外，由于你有一个所有按钮的精灵，你可以这样编写你的CSS：

.sprite {
     background: url(../images/icons/slider-controls.png);
}
.play {
     width: Apx; height: Bpx; background-position: 0 -Cpx;
}
.play_active {
     background-position: 0 -Dpx;
}
.pause {
     width: Epx; height: Fpx; background-position: 0 -Gpx;
}
.pause_active {
     background-position: 0 -Hpx;
}

etc..

然后你分配类：

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

和

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