MouseOver и MouseOut В CSS

Question

Для использования мыши в один элемент мы используем атрибут CSS :hover. Как насчет мыши из элемента?

Я добавил эффект перехода на элемент, чтобы изменить цвет. Эффект наведения работает отлично, но какой атрибут CSS я должен использовать для мыши, чтобы применить эффект? Я ищу решение для CSS, а не решение JavaScript или JQuery.

Answer 1

Вот лучшее решение, я думаю.

CSS onomouseout:

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

CSS OnMouseOver:

div:hover{ ... } 

Это лучше, потому что, если вам нужно установить некоторые стили ТОЛЬКО onmouseout и пытается сделать это таким образом

div { ... } 

вы будете устанавливать свои стили и для onmouseover тоже.

Answer 2

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

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

при наведении, цвет будет красным и когда вы «mouseout», цвет вернется к черному, потому что он больше не соответствует селектору :hover. Это поведение по умолчанию для всех браузеров, ничего особенного вам не нужно делать здесь.

Answer 3

Сам CSS не поддерживает переключатель mousein или mouseout.

Селектор :hover будет применяться к элементу, когда мышь над ним, добавив стиль, когда мышь входит и удаляет стиль, когда уходит мышь.

Ближайший подход - определить стили, которые вы разместили бы в mouseout в стилях по умолчанию (не зависание). Когда вы нажмете на элемент, стили в пределах hover вступят в силу, эмулируя mousein, и когда вы перемещаете мышь с элемента, стили по умолчанию снова вступят в силу, эмулируя mouseout.

Вот example, взятый из 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); 
} 

В transition ы, определенные для div:hover стиля вступит в силу, когда мышь попадает (и hover прилагается). transition s для стиля div вступят в силу, когда листья мыши (и удаляется hover). Это приводит к тому, что переходы mousein и mouseout различны.

Answer 4

Я думаю, что нашел решение.

.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 
    */ 
} 

Просто попробуйте ... :)