使用onclick进行CSS3过渡效果

Question

我正在通过CSS3工作,有点困在一个问题.

问题如下:

我的图像最初位于屏幕的左侧:

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

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

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

这非常完美.唯一的问题是当我点击图像时想要获得相同的效果.那就是我希望图像在点击时从左移动500px并保持在那里.当我点击图像时,它应该再次移回原始位置.

我该怎么办呢,请解释一下!!!!

Answer 1

您可以使用几乎相同的方法,只需使用JS/jQuery添加/删除具有所有规则(如悬停状态)的类.

CSS

.box img:hover, .box img.clicked{
    margin-left:500px;
    -webkit-transition:1s; // you don't need to specify this again
 }

jQuery的

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

UPDATE

这是一个例子:http://jsfiddle.net/Te9T5/ Hover状态被删除,因为当你同时悬停和点击做同样的事情时看起来不太好,因为你需要悬停一些东西才能点击它.