html mouseover css,html - MouseOver and MouseOut In CSS - Stack Overflow

CSS itself does not support a mousein or mouseout selector.

The :hover selector will apply to the element while the mouse is over it, adding the style when the mouse enters and removing the style when the mouse leaves.

The nearest approach is to define the styles which you would place in mouseout within your default (non-hover) styles. When you mouse-over the element the styles within hover will take effect, emulating a mousein, and when you move your mouse off the element the default styles will take effect again, emulating mouseout.

Here is an example, taken from 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);

}

The transitions defined for the div:hover style will take effect when the mouse enters (and hover is applied). The transitions for the div style will take effect when the mouse leaves (and hover is removed). This results in the mousein and mouseout transitions being different.