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

2022-01-22 00:00:00 hover css

有什么方法可以与 :hover 仅使用 CSS相反?如:如果 :hover 是 on Mouse Enter，是否有相当于 on Mouse Leave 的 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 菜单.当我悬停其中一个项目时，会有一个从 #999 到 black 的 CSS 颜色动画.如何在鼠标离开项目区域时创建相反的效果，动画从 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的定义是:

:hover 选择器用于在鼠标悬停时选择元素他们.

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

根据该定义，悬停的反义词是鼠标不在其上方的任何点.比我聪明得多的人写了这篇文章，在两种状态下设置了不同的转换 - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

By that definition 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;
}

相关文章