CSS, после наведения сохранить изменения

Я использую CSS для красивого эффекта переполнения.

Итак, если я наведу курсор на изображение, оно исчезнет с другим изображением с помощью этого кода:

#image{
margin: 0 auto;
width: 100%;
background-position: center;
background-repeat: no-repeat;
height: 400px;
background-image: url('xerath.png');
-o-transition:color .1s ease-out, background 1s ease-in;
-ms-transition:color .1s ease-out, background 1s ease-in;
-moz-transition:color .1s ease-out, background 1s ease-in;
-webkit-transition:color .1s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition:color .1s ease-out, background 1s ease-in;
}

#image:hover{
background-image: url('riven.png');
}

Но теперь, если я наведу курсор на изображение, оно изменится, когда я отключу мышь, изображение изменится обратно, я не хочу, чтобы оно менялось обратно.

Как я могу это исправить?


html css mousehover
person Chiel    schedule 26.07.2014    source источник
comment
Можете ли вы создать скрипку для этого?   -  person Shah Rukh    schedule 26.07.2014
comment
Я не думаю, что это возможно только с помощью CSS. Вам понадобится немного JS.   -  person user247702    schedule 26.07.2014
comment
jsfiddle.net/8ZuEC Вот оно, если быстро навести указатель мыши на изображение, вы увидите, что оно немного немного глючит, я не хочу этого :D   -  person Chiel    schedule 26.07.2014
comment
Если можно, куда ставить JS и какой JS›   -  person Chiel    schedule 26.07.2014
comment
Да, я знаю, но я не могу писать JS, так что может кто-нибудь помочь мне, чтобы он не глючил :?   -  person Chiel    schedule 26.07.2014
comment
Вы не можете запустить его с анимацией?   -  person Phillip Gruneich    schedule 26.07.2014
comment
С jQuery: jsbin.com/pezeponu/1/edit   -  person Black Sheep    schedule 26.07.2014
comment
Вы можете выполнить встроенное кодирование с помощью javascript (библиотеки), используя следующие элементы, которые дают гораздо больше контроля над мышью, onmouseout, onmousedown, onmouseup.   -  person Vivo    schedule 26.07.2014

Ответы (1)


arrow_upward
2
arrow_downward

Есть два возможных решения.

Только CSS

Переместите свои переходы на :hover и добавьте

-webkit-transition-duration:10000s;
   -moz-transition-duration:10000s;
    -ms-transition-duration:10000s;
     -o-transition-duration:10000s;
        transition-duration:10000s;

до #image. Это делает переход изображения назад настолько медленным, что создается впечатление, что изображение сохраняет изменения.

Демо

С JavaScript

Добавьте прослушиватель событий для mouseover к изображению и примените класс к #image, который сохранит изменения.

JavaScript

document.querySelector("#image").addEventListener("mouseover",function() {
    this.classList.add("transitioned");
});

CSS

#image.transitioned {
    background-image: url('http://g2f.nl/07vbp18');
}

См. скрипт

person SVSchmidt    schedule 26.07.2014
comment
Эта секунда с JS работает очень хорошо! Но я хочу, чтобы когда я снова навел на нее мышь, она вернулась, возможно ли это как-то? - person Chiel; 26.07.2014
comment
jsfiddle.net/Whre/zadTY/4 :) - person SVSchmidt; 26.07.2014
comment
Но теперь он глючит, если вы очень быстро двигаете мышью по нему. - person Chiel; 26.07.2014
comment
Кто-нибудь, кто знает, как исправить глючную вещь? Потому что, когда вы быстро перемещаете мышь по нему, он глючит. Или, может быть, можно менять фоновое изображение div каждые 5 секунд или что-то в этом роде? - person Chiel; 26.07.2014
comment
Это должно работать: jsfiddle.net/Whre/zadTY/6 Но я не знать, является ли это лучшим возможным решением. Если у каждого есть идея получше, пожалуйста, дайте мне знать! - person SVSchmidt; 27.07.2014