MouseOver и MouseOut в CSS

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

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

10
css html5

4 ответов

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

CSS onomouseout:

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

CSS onmouseover:

div:hover{ ... }

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

div { ... }

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

29

сам 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);
}

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

20

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

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

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

6

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

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

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

1