Question

我已经花了好几个小时来查看尽可能多的在线资源和stackoverflow问题，但由于某些原因我无法弄清楚这一点。

我正在尝试使用CSS和图像精灵将链接显示为一旦图像悬停并且一旦点击就会发生变化的图像。我已经玩过CSS并且现在看了很长时间的JavaScript，我只需要一些指导如何使它工作。

一旦它徘徊，我就设法让它改变了，但是我真正需要做的是在点击后改变图像。所以从它开始显示播放按钮，单击它时会显示一个暂停按钮，再次单击它，它会显示播放按钮等。

从我可以收集的内容中，我将需要使用JavaScript和onclick事件。但是我不确定这是如何工作的，或者如何将它与图像精灵一起使用。

到目前为止我的CSS看起来像这样

.testclass .stratus { background-position: -1px -1px; width: 21px; height: 21px;}。

.testclass .stratus:hover {background-position: -1px -29px; width: 21px; height: 21px;}。

然而，这只会影响播放按钮以及悬停时的效果。现在我需要一种方法来在点击播放按钮时显示暂停按钮，反之亦然。

图片精灵网址。 http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png

网页的网址我试图让这个工作。 http://www.priceofmilk.co.uk/uncategorized/ddd-2

这可以使用CSS和HTML实现，还是我还需要使用一些JavaScript？非常感谢任何帮助。

Answer 1

我做了一个简单的例子。我使用背景颜色和锚点，但您可以在您的情况下轻松实现。

更新

更新了代码，以便使用您的图片。

HTML

<a class="play_pause">PLAY</a>

CSS

.play_pause {
    display: block;
    width: 24px;
    height: 23px;
    text-indent: -99999px;
    background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png); 
    cursor: pointer;
}

.playing {
    background-position: -27px 0; 
}

.playing:hover {
    background-position: -27px -28px !important; 
}

.play_pause:hover {
    background-position: 0 -28px; 
}

和JS：

$(document).ready(function() {
    $(".play_pause").click(function() {
        $(this).toggleClass('playing');
    });
});

JsFiddle example

Answer 2

你读到的地方很简单吗？

jQuery('.testclass .stratus').click(function{
   jQuery(this).toggleClass('played');
})

的CSS：

.played{
   background-position: -1px -29px;
}

Answer 3

你必须使用JavaScript来完成切换，没有办法用纯CSS完成这样的逻辑。

最简单的方法是拥有两个课程play和pause。通过CSS，您可以声明要为每个类显示的精灵部分。然后使用JavaScript将单击事件侦听器附加到元素，并在单击事件回调中从元素中删除类play，然后应用类pause，反之亦然。

MDN对于如何将事件侦听器附加到元素有a good article。 this SO question讨论如何在元素上添加/删除类。

Answer 4

如果您只想检测第一次点击，可以通过给链接一个id并使用：target伪类（例如#theid：target {...}）来在纯CSS中执行此操作

但是，由于您需要检测第二次单击，因此您需要使用JS在CSS类之间切换。基本方法是使用事件处理程序：

document.getElementById('theid').onclick = function(){
this.className = this.className=='play' ? 'pause' : 'play';
};

Answer 5

使用.querySelectorAll和.addEventListener的current sprite示例。没有使用jQuery。

var elm = document.querySelectorAll('.testclass .stratus'), i = elm.length, e;
while (e = elm[--i])
    e.addEventListener('click', function () { // this fn generates the listener
        var pause = false; // captured in scope, not global
        return function () { // this is the actual listener
            this.style.backgroundPositionX = (pause = !pause)?'-20px':'0px';
        }
    }(), false); // the () invokes the generator

单击后更改图像

5 个答案:

更新