CSS：对面：hover（在鼠标离开）？ [英] CSS: opposite of :hover (on mouse leave)?

问题描述

有没有办法做：hover 仅使用 CSS的相反方法？如：如果：hover 是在鼠标输入，有一个CSS等效于鼠标离开？

Is there any way to do the opposite of :hover using only CSS? As in: if :hover is on Mouse Enter, is there a CSS equivalent to on Mouse Leave?

示例：

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

I have a HTML menu using list items. When I hover one of the items, there is a CSS color animation from #999 to black. How can I create the opposite effect when the mouse leaves the item area, with an animation from black to #999?

jsFiddle

（请记住，我不想只回答这个例子，而是整个：hover 的对立面。）

(Have in mind that I do not wish to answer only this example, but the entire "opposite of :hover" issue.)

推荐答案

如果我理解正确，你可以做同样的事情，将你的过渡到链接，而不是悬停状态：

If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state:

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的定义是：

The definition of hover is:

当鼠标悬停在
上时，hover选择器用于选择元素。

The :hover selector is used to select elements when you mouse over them.

通过定义，hover的相反是鼠标不的任何点。比我更聪明的人做了这篇文章，在两个州设置不同的转换 - http： //css-tricks.com/different-transitions-for-hover-on-hover-off/

By that definiation the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on both states - 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：对面：hover（在鼠标离开）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！