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');
});

更新

以下是一个示例：http://jsfiddle.net/Te9T5/ 悬停状态被删除，因为当你让悬停和点击做同样的事情时看起来不太好，因为你需要悬停某些东西才能点击它。

Answer 2

使用JavaScript，也许你可以做这样的事情？基本上我在我的示例中所做的是在单击图像时更改margin-left属性，并根据其位置添加margin-left: 500px;或margin-left: 0;

请注意，我已在img-tag中添加了id，这样就可以使用document.getElementById来访问/更改图片的margin-left属性。

这是 demo

<强> HTML

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

CSS （添加了无前缀的转换）

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

<强> JS

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

    move.onclick = function () {

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

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

Answer 3

如果您只想继续使用css伪类，那么您可以将img标记包装在a标记中，该标记无处可寻，为您提供完整的锚类类堆栈

对于这样的事情：

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

然后，您可以通过:active psuedo类访问css：

.box .img_wrapper img {..}
.box .img_wrapper:hover img {..}
.box .img_wrapper:active img {..}

此处完整参考：http://www.w3schools.com/css/css_pseudo_classes.asp

Answer 4

原来css有一个：target伪选择器可以使用看一下这个 http://tangledindesign.com/how-to-trigger-css3-transitions-on-click-using-target/

使用onclick进行CSS3过渡效果

4 个答案: