:hover (鼠标离开时)的反义词是什么?

新手上路,请多包涵

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

例子:

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

jsFiddle

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

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

阅读 2.5k
2 个回答

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

 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 许可协议

相反的是使用 :not

例如

selection:not(:hover) { rules }

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题