如何将2个图标/图像结合在一起

Question

我有这个代码：

<li><a href="javascript:void(0);" onclick="document.getElementById('video_background').play()"><i class="icon icon-play"></i></a></li>
<li><a href="javascript:void(0);" onclick="document.getElementById('video_background').pause()"><i class="icon icon-pause"></i></a></li>

创建这两个图标：https：//i.stack.imgur.com/kilvu.jpg每个图标运行一个不同的函数。

我如何结合两个图标，只有1个图标与图标pusible可见，而onClick会将图标更改为图标播放，并且仍在执行函数" document.getElementById（'video_background'）。暂停（暂停（）"

最好的问候

Answer 1

如果要将它们保留为单个图像，并且仅显示一个图标（即一次图像的一半），则可以制作一个spriteSheet。本文解释了如何详细说明它们。您只需根据要看到的图标来调整background-position！让我知道您是否需要更多细节。

Answer 2

这里有一些CSS/JS，可能会使您更加接近。http://jsfiddle.net/brocklob/6s58y/2/如果这无助于尝试重新单词/粘贴完整的示例。

<style>
.icon {
display: block;
width: 46px;
height: 46px;
background: url('http://i.imgur.com/L08OI7V.jpg') no-repeat;
background-position: right top;
}
.icon-play {
background-position: left top;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    $('.icon').on('click', function(e) {
      $('.icon').toggleClass("icon-play");
      e.preventDefault();
    });
</script>
<button class="icon"></button>