MouseOver i MouseOut In CSS

Question

Do korzystania z myszy w jednym elemencie używamy atrybutu CSS :hover. Co powiesz na mysz z żywiołu?

Dodałem efekt przejścia do elementu, aby zmienić kolor. Efekt zawieszania działa dobrze, ale do jakiego atrybutu CSS powinienem użyć, aby użyć myszy do zastosowania efektu? Szukam rozwiązania CSS, a nie rozwiązania JavaScript lub JQuery.

Answer 1

Oto najlepsze rozwiązanie, myślę.

CSS onomouseout:

div:not(:hover){ ... } 

CSS onmouseover:

div:hover{ ... } 

Lepiej, bo jeśli trzeba ustawić kilka stylów TYLKO onmouseout i staramy się robić to w ten sposób

div { ... } 

ustawisz też swoje style i dla onmouseover.

Answer 2

Wystarczy tylko potrzebne :hover, gdy mysz z elementu, będzie to powrót do jego domyślny nie-: hover stan, tak:

.class { color: black; } 
.class:hover { color: red; } 

po najechaniu, kolor będzie czerwony a kiedy "wyłączysz", kolor powróci do czerni, ponieważ nie pasuje już do selektora :hover. Jest to domyślne zachowanie dla wszystkich przeglądarek, nic specjalnego nie musisz tutaj robić.

Answer 3

Sam CSS nie obsługuje selektora mousein lub mouseout.

Selektor :hover zastosuje się do elementu, gdy mysz znajduje się nad nim, dodając styl, gdy mysz wchodzi i usuwa styl po opuszczeniu myszy.

Najbliższym podejściem jest zdefiniowanie stylów, które można umieścić w mouseout w domyślnych stylach (bez użycia hover). Po najechaniu kursorem myszy na element zaczną obowiązywać style z zakresu hover, emulując znak mousein, a po przesunięciu myszy od elementu domyślne style zaczną obowiązywać ponownie, emulując mouseout.

Oto example, zaczerpnięte z here:

div { 
    background: #2e9ec7; 
    color: #fff; 
    margin: 0 auto; 
    padding: 100px 0; 
    -webkit-transition: -webkit-border-radius 0.5s ease-in; 
    -moz-transition: -moz-border-radius 0.5s ease-in; 
    -o-transition: border-radius 0.5s ease-in; 
    -ms-transition: border-radius 0.5s ease-in; 
    transition: border-radius 0.5s ease-in; 
    text-align: center; 
    width: 200px; 
} 


div:hover { 
    background: #2fa832; 
    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    border-radius: 100px; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
    -webkit-transform: rotate(720deg); 
    -moz-transform: rotate(720deg); 
    -o-transform: rotate(720deg); 
    -ms-transform: rotate(720deg); 
    transform: rotate(720deg); 
} 

W transition s zdefiniowane dla stylu div:hover zostaną wprowadzone po wejściu myszy (i hover jest stosowane). Styl transition dla stylu div zacznie obowiązywać po opuszczeniu myszy (i usunięciu hover). Powoduje to, że przejścia są różne.

Answer 4

Myślę, że znalazłem rozwiązanie.

.class :hover { 
    /*add your animation of mouse enter*/ 
} 

.class { 
    /* 
    no need for not(hover) or something else. 
    Just write your animation here and it will work when mouse out 
    */ 
} 

Wystarczy spróbować ... :)