鼠标悬停(鼠标离开)的反义词是什么?

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?

有没有相反的方法:仅使用CSS实现悬浮?如:如果:鼠标悬停是在鼠标回车，是否有CSS等效于鼠标离开?

Example:

例子:

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?

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

jsFiddle

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

(请记住，我不想只回答这个例子，而是整个“:悬浮”问题。)

7 个解决方案

#1

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/

The definition of hover is:

悬浮的定义是:

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

鼠标移到元素上时，使用:hover selector选择元素。

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;
}

#2

Just use CSS transitions instead of animations.

使用CSS转换而不是动画。

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

Live demo

现场演示

#3

No there is no explicit property for mouse leave in CSS.

不，CSS中没有显式的鼠标离开属性。

You could use :hover on all the other elements except the item in question to achieve this effect. But Im not sure how practical that would be.

您可以使用:将鼠标悬停在所有其他元素上(除了所讨论的项目)，以达到此效果。但我不确定这有多实际。

I think you have to look at a JS / jQuery solution.

我认为您必须考虑JS / jQuery解决方案。

#4

You can use CSS3 transition

您可以使用CSS3转换

Some good links:

一些好的链接:

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understanding-css3-transitions/

#5

You have misunderstood :hover; it says the mouse is over an item, rather than the mouse has just entered the item.

你误解了:徘徊;它说鼠标是在一个项目上，而不是鼠标刚刚进入项目。

You could add animation to the selector without :hover to achieve the effect you want.

您可以向选择器添加动画，无需:hover以实现您想要的效果。

Transitions is a better option: http://jsfiddle.net/Cvx96/

转换是更好的选择:http://jsfiddle.net/Cvx96/

#6

The opposite of :hover appears to be :link.

悬停的反义词是:link。

(edit: not technically an opposite because there are 4 selectors :link, :visited, :hover and :active. Five if you include :focus.)

(编辑:技术上并不是相反，因为有4个选择符:link，:visited，:hover and:active。如果你包括五个:专注。

For example when defining a rule .button:hover{ text-decoration:none } to remove the underline on a button, the underline shows up when you roll off the button in some browsers. I've fixed this with .button:hover, .button:link{ text-decoration:none }

例如，当定义规则.button:悬停{text-decoration:none}以删除按钮上的下划线时，下划线会在某些浏览器中出现。我用。button:hover，。button:link{text-decoration:none}

This of course only works for elements that are actually links (have href attribute)

这当然只适用于实际链接的元素(有href属性)

#7

Although answers here are sufficient, I really think W3Schools example on this issue is very straightforward (it cleared up the confusion (for me) right away).

虽然这里的答案已经足够了，但我真的认为W3Schools在这个问题上的例子非常简单(它立刻消除了(对我来说)困惑)。

Use the :hover selector to change the style of a button when you move the mouse over it.

使用:hover selector在鼠标移动按钮时更改按钮的样式。

Tip: Use the transition-duration property to determine the speed of the "hover" effect:

提示:使用过渡持续时间属性确定“悬停”效果的速度:

Example

例子
.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

In summary, for transitions where you want the "enter" and "exit" animations to be the same, you need to employ transitions on the main selector .button rather than the hover selector .button:hover. For transitions where you want the "enter" and "exit" animations to be different, you will need specify different main selector and hover selector transitions.

总之，对于想要“enter”和“exit”动画效果相同的转换，您需要在主选择器.button上使用转换，而不是鼠标悬停选择器.button:hover。对于需要“输入”和“退出”动画的转换，您需要指定不同的主选择器和悬停选择器转换。

#1