CSS3过渡效果与onclick事件

Question

CSS3过渡效果与onclick事件

17

我正在学习CSS3，但遇到了一个问题。

问题如下：

我有一张图片最初的位置是在屏幕左侧：

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

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

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

这个效果非常完美，唯一的问题是当我想要在点击图片时产生相同的效果时。也就是说，我希望点击图片时它向左移动500像素并停留在那里。再次点击图片时，它应该移回到原来的位置。

我该如何处理，请给我解释！！！

- Abhishek

寻找纯CSS解决方案？这可能会有所帮助：https://dev59.com/XmEh5IYBdhLWcg3w32xG#21919261 - Hashem Qolami

4个回答

4

使用JavaScript，也许你可以像这样做？在我的示例中，基本上是在图像被点击时改变了margin-left属性，并根据其位置添加了margin-left: 500px;或margin-left: 0; 请注意，我已经向img标签添加了一个id，这是为了能够使用document.getElementById来访问/更改图像的margin-left属性。

这里有一个演示 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";
        }
    };
})();

- Christofer Vilander

2

如果您只想继续使用CSS伪类，那么您可以将img标签包装在一个指向无处的a标签中，这样您就可以获得完整的锚点伪类堆栈。

对于像这样的内容：

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

您可以通过 :active 伪类使用 CSS 访问点击事件：

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

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

（该文档为关于CSS伪类的详细介绍，包含了所有可用的伪类及其使用方法）

- Alan L.

0

原来 CSS 有一个 :target 伪选择器，可以用来检查这个链接 http://tangledindesign.com/how-to-trigger-css3-transitions-on-click-using-target/。

- sahil lamba

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shomz · Accepted Answer

你可以使用几乎相同的方法，只需使用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/ 悬停状态被移除了，因为当您需要悬停才能单击时，同时拥有悬停和单击执行相同操作并不好看。