CSS3 эффект перехода с onclick

Question

CSS3 эффект перехода с onclick

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

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

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

.box img{

margin-left:0;

-webkit-transition:1s;

 }

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

.box img:hover{

margin-left:500px;

-webkit-transition:1s;

 }

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

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

581 4

javascript css css3 css-transitions

4 ответов:

Comments

Ничего не найдено.

Shomz · Accepted Answer · 2013-11-19 15:04:16

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

Christofer Vilander · Accepted Answer · 2013-11-19 09:16:51

С 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";
        }
    };
})();

Alan L. · Accepted Answer · 2013-11-19 05:16:52

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

Для чего-то вроде этого:
<div class="box"><a href="#" class="img_wrapper"><img src=https://www.google.com/images/srpr/logo11w.png /></a></box>
Затем вы можете получить доступ к click с помощью 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

sahil lamba · Accepted Answer · 2013-11-25 07:59:40

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