MouseOver и MouseOut В CSS

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

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

Ответ 1

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

CSS onomouseout:

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

CSS onmouseover:

div:hover{ ... }

Это лучше, потому что если вам нужно установить некоторые стили только ONMouseout и попытаться сделать это таким образом

div { ... }

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

Ответ 2

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

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

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

Вот пример , взятый из здесь:

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 для стиля div вступает в силу при удалении мыши (и hover). Это приводит к тому, что переходы mousein и mouseout различаются.

Ответ 3

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

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

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

Ответ 4

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

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

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