CSS 中的 MouseOver 和 MouseOut答案

【问题标题】：MouseOver and MouseOut In CSSCSS 中的 MouseOver 和 MouseOut
【发布时间】：2021-08-10 20:07:42
【问题描述】：

为了在一个元素上使用鼠标，我们使用:hover CSS 属性。鼠标移出元素怎么办？

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

【问题讨论】：

标签： css html

【解决方案1】：

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

CSS onomouseout：

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

CSS 鼠标悬停：

div:hover{ ... }

这样更好，因为如果您需要设置一些样式，只需要在鼠标输出上并尝试以这种方式执行此操作

div { ... }

你也可以设置你的样式和鼠标悬停。

【讨论】：

对我不起作用，我想要的是当鼠标拖动滑块并且鼠标在滑块中（滑块更新 - 绿色）或鼠标在滑块之外并拖动时显示不同的颜色（鼠标向上滑块不更新 - 红色）。
我只想在 mouseout 事件发生时应用动画，而不是在页面加载时应用动画。此解决方案不适合这种要求。

【解决方案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);
}

为div:hover 样式定义的transitions 将在鼠标进入时生效（并应用hover）。 div 样式的 transitions 将在鼠标离开时生效（并且 hover 被移除）。这会导致 mousein 和 mouseout 转换不同。

【讨论】：

过渡：全1轻松；解决了这个问题。鼠标移出时平滑过渡。谢谢老哥！

【解决方案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
    */
}

试试吧……:)

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

Ops ，我在这里问之前用谷歌搜索过。发布问题后继续我的谷歌搜索并找到答案，只是我想将解决方案分享给其他人，不再。