MouseOver and MouseOut In CSS

Question

For using mouse into one element we use the :hover CSS attribute. How about for mouse out of the element?

I added a transition effect on the element to

Answer 1

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.