Question

要将鼠标用于一个元素，我们使用:hover CSS属性。将鼠标移出元素怎么样？

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

Answer 1

我认为这是最佳解决方案。

CSS onomouseout：

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

CSS onmouseover：

div:hover{ ... }

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

div { ... }

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

Answer 2

CSS本身不支持mousein或mouseout选择器。

当鼠标悬停在元素上时，:hover选择器将应用于元素，鼠标进入时添加样式，鼠标离开时删除样式。

最接近的方法是定义您在默认（非悬停）样式中放置在mouseout中的样式。当鼠标悬停在元素上时，hover中的样式将生效，模拟mousein，当您将鼠标移离元素时，默认样式将再次生效，模拟mouseout

以下是example，取自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);
}

为transition样式定义的div:hover将在鼠标进入（并且应用hover时）生效。 transition样式的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
    */
}

试试吧......：）

Answer 4

您只需要:hover，当您将鼠标移出元素时，它将返回默认的非：悬停状态，如下所示：

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

当您悬停时，颜色将为红色，当您“鼠标移开”时，颜色将返回黑色，因为它不再与:hover选择器匹配。这是所有浏览器的默认行为，您无需在此处做任何特殊操作。

MouseOver和MouseOut在CSS中

4 个答案: