使用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狀態被刪除，因為當你同時懸停和點擊做同樣的事情時看起來不太好，因為你需要懸停一些東西才能點擊它。

Answer 2

使用JavaScript，也許你可以做這樣的事情？ 基本上我在我的例子中正在做的是在點擊圖像時改變margin-left屬性，並根據它的位置增加margin-left: 500px; 或margin-left: 0;

請注意，我已經為img-tag添加了一個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";
        }
    };
})();

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有一個：目標偽選擇器，可以用來檢查這個http://tangledindesign.com/how-to-trigger-css3-transitions-on-click-using-target/