Html CSS 中的 MouseOver 和 MouseOut
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18493427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MouseOver and MouseOut In CSS
提问by Moslem7026
For using mouse into one element we use the :hoverCSS attribute. How about for mouse out of the element?
为了将鼠标用于一个元素，我们使用:hoverCSS 属性。鼠标移出元素怎么样？
I added a transition effect on the element to change the color. The hover effect works fine, but what CSS attribute should I use for mouse out to apply the effect? I'm looking for a CSS solution, not a JavaScript or JQuery solution.
我在元素上添加了一个过渡效果来改变颜色。悬停效果工作正常，但是我应该使用什么 CSS 属性让鼠标移出来应用效果？我正在寻找 CSS 解决方案，而不是 JavaScript 或 JQuery 解决方案。
回答by dr.anon
Here is the best solution, i think.
我认为这是最好的解决方案。
CSS onomouseout:
CSS onomouseout：
div:not( :hover ){ ... }
CSS onmouseover:
CSS 鼠标悬停：
div:hover{ ... }
It's better, because if you need to set some styles ONLY onmouseout and trying to do this in this way
更好，因为如果您只需要在mouseout上设置一些样式并尝试以这种方式执行此操作
div { ... }
you will set your styles and for onmouseover too.
您也将设置您的样式和 onmouseover。
回答by STW
CSS itself does not support a mouseinor mouseoutselector.
CSS 本身不支持 amousein或mouseout选择器。
The :hoverselector 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.
该:hover选择将应用到元素，而鼠标在它，添加样式当鼠标进入和删除样式鼠标离开的时候。
The nearest approach is to define the styles which you would place in mouseoutwithin your default (non-hover) styles. When you mouse-over the element the styles within hoverwill take effect, emulating a mousein, and when you move your mouse off the element the default styles will take effect again, emulating mouseout.
最近的方法是定义您将放置在mouseout默认（非悬停）样式中的样式。当您将鼠标悬停在元素上时，其中的样式hover将生效，模拟mousein，当您将鼠标移离元素时，默认样式将再次生效，模拟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:hoverstyle will take effect when the mouse enters (and hoveris applied). The transitions for the divstyle will take effect when the mouse leaves (and hoveris removed). This results in the mouseinand mouseouttransitions being different.
transition为div:hover样式定义的s将在鼠标进入（并hover应用）时生效。当鼠标离开（并被移除）时transition，div样式的s将生效hover。这导致mousein和mouseout转换不同。
回答by bettayeb
I think that I've found the solution.
我想我已经找到了解决方案。
.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
*/
}
Just try it... :)
就试一试吧... ：）
回答by Moslem7026
You only need the :hover, when you mouse out of the element, it'll return to it's default non-:hover state, like this:
您只需要:hover, 当您将鼠标移出元素时，它将返回到默认的非：悬停状态，如下所示：
.class { color: black; }
.class:hover { color: red; }
when you hover, the color will be red and when you "mouseout", the color will return to black because it no longer matches the :hoverselector. This is the default behavior for all browsers, nothing special you need to do here.
当您悬停时，颜色将是红色，当您“鼠标移开”时，颜色将返回黑色，因为它不再与:hover选择器匹配。这是所有浏览器的默认行为，您无需在此处执行任何特殊操作。
