CSS：相反的：hover（鼠标离开）？
有什么办法做相反的:hover 只使用 CSS？ 如在：如果:hover on Mouse Enter ，是否有一个相当于on Mouse Leave的CSS？
例：
我有一个使用列表项目的HTML菜单。 当我hover其中一个项目时，有一个从#999到black的CSS彩色animation。 当鼠标离开项目区域时，如何创build相反的效果，animation从black到#999 ？
的jsfiddle
（请记住，我不想只回答这个例子，而是整个“ :hover ”问题的对立面）。
如果我理解正确，你可以通过移动你的转换到链接而不是hover状态来做同样的事情：
ul li a { color:#999; transition: color 0.5s linear; /* vendorless fallback */ -o-transition: color 0.5s linear; /* opera */ -ms-transition: color 0.5s linear; /* IE 10 */ -moz-transition: color 0.5s linear; /* Firefox */ -webkit-transition: color 0.5s linear; /*safari and chrome */ } ul li a:hover { color:black; cursor: pointer; }
http://jsfiddle.net/spacebeers/sELKu/3/
hover的定义是：
hoverselect器用于在鼠标上方select元素。
通过这个定义，hover的对立面就是鼠标不在其上的任何一点。 比我更聪明的人已经完成了这篇文章，在两个国家设置不同的转换 – http://css-tricks.com/different-transitions-for-hover-on-hover-off/
#thing { padding: 10px; border-radius: 5px; /* HOVER OFF */ -webkit-transition: padding 2s; } #thing:hover { padding: 20px; border-radius: 15px; /* HOVER ON */ -webkit-transition: border-radius 2s; }
只需使用CSS转换而不是animation。
A { color: #999; transition: color 1s ease-in-out; } A:hover { color: #000; }
现场演示
不，在CSS中没有鼠标离开的明确属性。
您可以使用：hover在除了有问题的项目之外的所有其他元素来实现此效果。 但我不知道这将是多么实际。
我想你必须看一下JS / jQuery解决scheme。
你可以使用CSS3转换
一些好的链接：
http://css-tricks.com/different-transitions-for-hover-on-hover-off/
http://www.alistapart.com/articles/understanding-css3-transitions/
你误会了:hover ; 它说鼠标在一个项目上，而不是鼠标刚进入该项目。
您可以将animation添加到select器中，方法是:hover以实现所需的效果。
转换是一个更好的select： http : //jsfiddle.net/Cvx96/
相反:hover似乎是:link 。
（编辑：不是技术上相反，因为有4个select器:link ， :visited ， :hover和:active 。如果包含:focus则为五个。
例如，当定义一个规则.button:hover{ text-decoration:none }以删除button上的下划线时，在某些浏览器中滚动button时会显示下划线。 我已经解决了.button:hover, .button:link{ text-decoration:none }
这当然只适用于实际链接的元素（具有href属性）
虽然这里的答案是足够的，但我真的认为W3School在这个问题上的例子是非常简单的（它立即解决了我的困惑）。
将鼠标移到上面时，使用
:hoverselect器可以更改button的样式。提示：使用transition-duration属性来确定“hover”效果的速度：
例
.button { -webkit-transition-duration: 0.4s; /* Safari & Chrome */ transition-duration: 0.4s; } .button:hover { background-color: #4CAF50; /* Green */ color: white; }
总之，对于想要“input”和“退出”animation相同的转换，您需要在主select器.button上使用转换，而不是使用hoverselect器.button:hover 。 对于希望“input”和“退出”animation不同的转场，您需要指定不同的主select器和hoverselect器转换。
