image - 使用 :target 移动背景图像

Question

是否可以使用锚点和 :target 选择器移动背景图像，每次点击某个数字或 px？

HTML：

<div id="main_pic">pictures</div>
<a href="#main_pic">right</a>

CSS：

#main_pic {
    height: 750px;
    width: 491px;
    background-image: url(file:///Mac%20Drive/Users/ludicious/Websites/Jongbom/images/main_comic.png);
    background-position:0px 0px;
    text-indent: -9999px;
    display: block;
}
#main_pic:target {
    background-position:+491px 0px;
}

我有 +491px 试图将图像向右移动多少 px 每次点击。我可以移动它一次，但之后就不能再移动了。有人知道我能做什么吗？

Answer 1

不，仅使用 CSS 是不可能的。您可以设置/取消设置一次偏移量（就像您设法做到的那样），但是如果不咨询 JavaScript，就无法多次添加任何内容。

除了一些伪选择器（其中一个是 :target，其他是 :hover 和 :active 例如）和一些 Shadow DOM 魔法（主要是输入元素）之外，DOM 本身几乎不会注意到用户正在做什么页面。相反，浏览器依赖于可以使用 JavaScript 观察到的事件。

结果，您将无法计算锚点的点击量，您只能查看它是否处于活动状态。不止一次移动背景是不够的。恐怕您将不得不为此使用 JavaScript。