:hover pomocy

pytanie zadane 15 lipca 2015 w HTML i CSS przez Eimens Maniak (69,240 p.)

.tile-1
{
    width: 500px;
    height: 309px;
    float: left;
    font-size: 40px;
    text-align: center;
    margin: 15px;
    border: 5px solid #000304;
}

.tile-1:hover
{
    background-image: url(dom.jpg);
    transition: background 1s;
}

Nie działa, transition: background 1s; działa na wszystko ale nie na pojawienie się grafiki :/ pomocy.

4 odpowiedzi

odpowiedź 15 lipca 2015 przez Comandeer Guru (608,940 p.)
wybrane 15 lipca 2015 przez Eimens

Najlepsza

transition zawsze przypisuje się do elementu, nie jego :hover

Natomiast faktycznie nie bardzo da się zanimować pojawiania się grafiki. Proponuję taką sztuczkę: http://jsfiddle.net/Comandeer/e5m662oy/1/

komentarz 15 lipca 2015 przez Eimens Maniak (69,240 p.)

A mogę nadać dla tła:hover

filter: blur(50px);

?? bo mi to jakoś działać nie chce :)

komentarz 15 lipca 2015 przez Comandeer Guru (608,940 p.)

Hmm… Spróbuj z prefiksem (byłem pewien, że już ich nie potrzeba):

-webkit-filter: blur(50px);

komentarz 15 lipca 2015 przez Eimens Maniak (69,240 p.)

całego diva rozmazuje :/ a jak bym chciał tylko tło?

komentarz 15 lipca 2015 przez Comandeer Guru (608,940 p.)

http://jsfiddle.net/Comandeer/e5m662oy/2/

odpowiedź 15 lipca 2015 przez kotfuterkowy Dyskutant (9,220 p.)

Nazwa pliku powinna być w cudzysłowie.

komentarz 15 lipca 2015 przez Eimens Maniak (69,240 p.)

Nie nie musi być.

odpowiedź 15 lipca 2015 przez SebastianGomularz Dyskutant (9,370 p.)

jakie tło ma .tile-1 ?

komentarz 15 lipca 2015 przez Eimens Maniak (69,240 p.)

Nie ma tła, i chcę że po najechaniu tło się pokazuje :)

komentarz 15 lipca 2015 przez SebastianGomularz Dyskutant (9,370 p.)

musi miec tło sprawdz jak dodasz czy bedzie działac ?

komentarz 15 lipca 2015 przez Comandeer Guru (608,940 p.)

No to ma ;) Domyślnie nadane przez przeglądarkę

komentarz 15 lipca 2015 przez Comandeer Guru (608,940 p.)

Hm, faktycznie jeśli obrazek jest ustawiony od początku to w chrome działa… Ale nie powinno, bo zgodnie ze specyfikacją CSS background-image nie jest animowalną własnością

odpowiedź 15 lipca 2015 przez shadax Obywatel (1,850 p.)

Ja mam taki kod i mi działa:

.div:hover
{
    background-image: url('obraz.png');
    -webkit-transition: background-image 1000ms linear;
    -moz-transition: background-image 1000ms linear;
    -o-transition: background-image 1000ms linear;
    -ms-transition: background-image 1000ms linear;
     transition: background-image 1000ms linear;
}

komentarz 15 lipca 2015 przez Comandeer Guru (608,940 p.)

Działa, ale tylko przy założeniu, że startujemy z jakimś obrazkiem i ma działać tylko w Chrome (w Firefoksie nie działa).

BTW prefiksy są już de facto niepotrzebne: http://caniuse.com/#feat=css-transitions