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

Question

是否可以使用 anchor 和 :target 选择器移动背景图像，每次点击一定数量或像素？

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 观察到的事件。

因此，您将无法统计 anchor 的点击量，您只能查看它是否处于事件状态。这不足以多次移动背景。恐怕您将不得不为此使用 JavaScript。