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

What is the opposite of :hover (on mouse leave)?

提问by Cthulhu

Is there any way to do the opposite of :hoverusing onlyCSS? As in: if :hoveris on Mouse Enter, is there a CSS equivalent to on Mouse Leave?

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

Example:

例子：

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

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

jsFiddle

js小提琴

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

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

采纳答案by SpaceBeers

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/

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

By that definition the opposite of hover is any point at which the mouse is notover 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/

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

回答by Marat Tanalin

Just use CSS transitionsinstead of animations.

只需使用CSS 过渡而不是动画。

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

A:hover {
    color: #000;
}

Live demo

现场演示

回答by Moin Zaman

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.

您可以在除相关项目之外的所有其他元素上使用 :hover 来实现此效果。但我不确定这有多实用。

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

我认为您必须查看 JS / jQuery 解决方案。

回答by SVS

You can use CSS3 transition

您可以使用 CSS3 过渡

Some good links:

一些不错的链接：

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

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

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

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

回答by Govind Rai

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

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

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

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

:hover当您将鼠标移到按钮上时，使用选择器更改按钮的样式。

提示：使用 transition-duration 属性来确定“悬停”效果的速度：

例子

.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 .buttonrather 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.

总之，对于您希望“进入”和“退出”动画相同的过渡，您需要在主选择器.button而不是悬停选择器上使用过渡.button:hover。对于您希望“进入”和“退出”动画不同的过渡，您需要指定不同的主选择器和悬停选择器过渡。

回答by Hassan Mahmoud

Put your duration time in the non-hover selection:

将您的持续时间放在非悬停选项中：

li a {
  background-color: #111;
  transition:1s;
}

li a:hover {
  padding:19px;
}

回答by Jose Luis Rasmussen Garcia

Just add a transition to the element you are messing with. Be aware that there could be some effects when the page loads. Like if you made a border radius change, you will see it when the dom loads.

只需为您正在处理的元素添加一个过渡。请注意，页面加载时可能会有一些影响。就像你改变了边界半径一样，你会在 dom 加载时看到它。

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}

回答by Stock Dave

Just add a transition and the name of the animation on the class inicial, in your case, ul li a, just add a "transition" property and that is all you need

只需在类 incial 上添加一个过渡和动画名称，在您的情况下，ul li a，只需添加一个“过渡”属性，这就是您所需要的

ul li {
    display: inline;
    margin-left: 20px;
}

ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}

ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}

@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}
    
@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
    
@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}
    
@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
    
@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}

<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>

回答by scripter

The opposite of :hoverappears to be :link.

的反面:hover似乎是:link。

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

（编辑：不是技术上相对的，因为有4种选择:link，:visited，:hover和:active五如果包括。:focus）

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:hover{ 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 属性）

回答by Alex Chamberlain

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

你误会了:hover；它说鼠标在一个项目上，而不是鼠标刚刚进入项目。

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

您可以向选择器添加动画，而不会:hover达到您想要的效果。

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

过渡是更好的选择：http: //jsfiddle.net/Cvx96/