Javascript 带onclick的CSS3跃迁效应

我正在努力完成CSS3，有点困在一个问题上

问题如下:

我有一个最初位于屏幕左侧的图像：

.box img{
margin-left:0;
-webkit-transition:1s;
 }

现在，在悬停时，当我希望效果发生时，即当我悬停在图像上时，将图像从左侧移动500px，代码如下：

.box img:hover{
margin-left:500px;
-webkit-transition:1s;
 }

这真是太好了。唯一的问题是，当我单击图像时，我希望获得相同的效果。也就是说，我希望图像移动500px从左点击，并留在那里。 当我再次点击图像时，它应该会移回原来的位置

---

我该怎么做，请解释我

如果您只想继续使用css伪类，那么您可以将

img

标记包装在一个指向任何地方的

a

标记中，从而获得完整的锚伪类堆栈

对于这样的事情：

<div class="box"><a href="#" class="img_wrapper"><img src=https://www.google.com/images/srpr/logo11w.png /></a></box>

---

这里的完整参考：

您可以使用几乎相同的方法，只需使用JS/jQuery添加/删除一个包含所有规则（如悬停状态）的类

CSS

jQuery

$('.box img').on('click', function() {
    $(this).toggleClass('clicked');
});

更新

以下是一个例子：

---

“鼠标悬停”状态被删除，因为当鼠标悬停和鼠标单击同时执行相同操作时，鼠标悬停状态看起来不太好，因为需要鼠标悬停才能单击鼠标。

使用JavaScript，您可以这样做吗？基本上，我在示例中所做的是在单击图像时更改

margin left

属性，并根据其位置添加

margin left:500px或
左边距：0

请注意，我在img标记中添加了一个
id
，这是为了能够使用
document.getElementById
访问/更改图像的
左边距
属性

这里有一个

HTML

<div class="box">
    <img id="move" src="http://placekitten.com/200/300" alt="Pic" />
</div>

JS

(function () {
    var move = document.getElementById('move');

    move.onclick = function () {

        if (move.style.marginLeft === "500px") {
            move.style.marginLeft = "0";

        } else {
            move.style.marginLeft = "500px";
        }
    };
})();

原来css有一个：target伪选择器，可以使用它
看看这个
它似乎不起作用。你能举例说明吗？当然，看看这里：。我已经删除了悬停动画，因为它会导致小故障，因为您实际上需要在单击之前悬停。基本上，我只是切换一个类，让CSS做动画，就像你在悬停状态下做的一样。嘿，Shomz，事情似乎很好，但是我无法运行脚本代码。它在JSFIDLE中工作得很好，但在我的代码中却不行。我将javascript代码放在标记内和标记内，但它似乎没有执行脚本代码？这可能有助于：
<div class="box">
    <img id="move" src="http://placekitten.com/200/300" alt="Pic" />
</div>

.box img {
    margin-left:0;
    -webkit-transition: 1s;
            transition: 1s;
}

(function () {
    var move = document.getElementById('move');

    move.onclick = function () {

        if (move.style.marginLeft === "500px") {
            move.style.marginLeft = "0";

        } else {
            move.style.marginLeft = "500px";
        }
    };
})();