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



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

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

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

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

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

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

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

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

148   4  

4 ответов:

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

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

Если вы просто хотите продолжать работать с псевдоклассами 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

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

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

Добавить ответ:
Отменить.