MouseOver和MouseOut在CSS中

Question

要将鼠标用于一个元素,我们使用:hoverCSS属性.将鼠标移出元素怎么样？

我在元素上添加了一个过渡效果来改变颜色.悬停效果工作正常,但我应该使用什么CSS属性鼠标来应用效果？我正在寻找一个CSS解决方案,而不是JavaScript或JQuery解决方案.

Answer 1

我认为这是最好的解决方案.

CSS onomouseout:

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

CSS onmouseover:

div:hover{ ... }

它更好,因为如果你需要在onmouseout上设置一些样式并尝试以这种方式执行此操作

div { ... }

你也会设置你的风格和onmouseover.

Answer 2

CSS本身不支持a mousein或mouseoutselector.

该:hover选择将应用到元素,而鼠标在它,添加样式当鼠标进入和删除样式鼠标离开的时候.

最接近的方法是定义您将在mouseout默认(非悬停)样式中放置的样式.当鼠标悬停在元素上时,其中的样式hover将生效,模拟a 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样式定义的s 将在鼠标进入(并hover应用)时生效.样式的transitions div将在鼠标离开(并被hover删除)时生效.这导致转换mousein和mouseout转换不同.

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

就试一试吧... :)