it-swarm.com.ru

CSS3 эффект перехода с помощью onclick

Я пробираюсь через CSS3 и вроде как застрял в одной проблеме.

Вопрос заключается в следующем: 

У меня есть изображение, которое изначально находится в левой части экрана:

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

Теперь при наведении, когда я хочу, чтобы эффект имел место, т.е. переместите изображение на 500px слева, когда я наведу курсор на изображение, следующий код: 

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

Это работает просто отлично. Единственная проблема заключается в том, когда я хочу получить тот же эффект, когда нажимаю на изображение. То есть я хочу, чтобы изображение перемещалось на 500 пикселей слева при щелчке и оставалось там…. Опять же, когда я нажимаю на изображение, оно должно вернуться в исходное положение.

Как я должен идти об этом, пожалуйста, объясните мне !!!!

10
Abhishek Singh Thakur

Вы можете использовать почти такой же подход, просто используйте 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/ Состояние при наведении снимается, потому что оно не выглядит хорошо, когда и при наведении, и при щелчке выполняется одно и то же, потому что вам нужно наведите что-нибудь, чтобы щелкнуть по нему.

12
Shomz

С JavaScript, может быть, вы могли бы сделать что-то подобное? В основном то, что я делаю в моем примере, это изменение свойства margin-left при нажатии на изображение, и в зависимости от его положения оно добавит margin-left: 500px; или margin-left: 0; 

Обратите внимание, что я добавил id к тегу img, чтобы иметь возможность использовать 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";
        }
    };
})();
3
Christofer Vilander

Если вы просто хотите продолжать работу с псевдоклассами css, то вы можете заключить свой тег img в тег a, который нигде не указывает, предоставляя вам полный стек псевдоклассов привязки

Для чего-то вроде этого: 

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

Затем вы можете получить доступ к клику с помощью css через класс :active psuedo:

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

Полная ссылка здесь: http://www.w3schools.com/css/css_pseudo_classes.asp

0
Alan L.

Оказывается, у css есть псевдоселектор: target, который можно использовать Проверьте это http://tangledindesign.com/how-to-trigger-css3-transitions-on-click-using-target/

0
sahil lamba