:hover （鼠标离开时）的反义词是什么？

Question

有什么方法可以与 :hover 仅使用 CSS 相反吗？如：如果 :hover 是 on Mouse Enter ，是否有相当于 on Mouse Leave 的 CSS？

例子：

我有一个使用列表项的 HTML 菜单。当我悬停其中一个项目时，有一个 CSS 颜色动画，从 #999 到 black 。如何在鼠标离开项目区域时创建相反的效果，动画从 black 到 #999 ？

jsFiddle点击预览

（请记住，我不想只回答这个例子，而是整个“与 :hover 相反的”问题。）

原文由 Cthulhu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果我理解正确，您可以通过将转换移动到链接而不是悬停状态来做同样的事情：

 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 选择器用于在您将鼠标悬停在元素上时选择元素。

根据该定义，悬停的反义词是鼠标 不在 其上方的任何点。比我聪明得多的人完成了这篇文章，在两种状态下设置了不同的转换 - 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;
}

原文由 SpaceBeers 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

相反的是使用 :not

例如

selection:not(:hover) { rules }

原文由 Jared Wilber 发布，翻译遵循 CC BY-SA 4.0 许可协议