2

我已经花了几个小时查看尽可能多的在线资源和 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;}.

然而，这只影响播放按钮和当它悬停时。现在我需要一种在单击播放按钮时显示暂停按钮的方法，反之亦然。

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

我试图让它工作的页面的 URL。 http://www.priceofmilk.co.uk/uncategorized/ddd-2

这可以使用 CSS 和 HTML 来实现，还是我还需要使用一些 JavaScript？任何帮助将不胜感激。

4

5 回答 5

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');
    });
});​​

​</p>

JsFiddle 示例

于 2012-12-21T12:20:44.667 回答
0

这很简单，你在哪里读过？

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

CSS：

.played{
   background-position: -1px -29px;
}
于 2012-12-21T12:13:24.497 回答
0

您将不得不使用 JavaScript 来完成切换，纯 CSS 无法完成这样的逻辑。

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

MDN 有一篇关于如何将事件侦听器附加到元素的好文章。这个 SO question讨论了如何在元素上添加/删除类。

于 2012-12-21T12:14:05.410 回答
0

如果您只想检测第一次点击，您可以在纯 CSS 中通过为链接提供 id 并使用 :target 伪类（例如 a#theid:target {...}）来实现

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

document.getElementById('theid').onclick = function(){
this.className = this.className=='play' ? 'pause' : 'play';
};
于 2012-12-21T12:16:10.587 回答
0

.querySelectorAll使用and的示例.addEventListener，与您当前的 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
于 2012-12-21T12:28:32.673 回答