什么是相反的：悬停（鼠标离开）？ [英] What is the opposite of :hover (on mouse leave)?

问题描述

有没有办法像：hover 一样使用 CSS？如： hover 是在鼠标输入中，是否存在一个等同于的CSS鼠标离开？

示例：

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

jsFiddle

（请记住，我不希望只回答这个例子，而是整个与：hover >相反的问题。）

解决方案

如果我理解正确，您可以通过将转换移至链接而不是悬停状态来执行相同的操作：

  ul li a {
 color：＃999; 
过渡：颜色0.5s线性; / *无供应商后退* / 
 -o-transition：颜色0.5s线性; / * opera * / 
 -ms-transition：color 0.5s linear; / * IE 10 * / 
 -moz-transition：color 0.5s linear; / * Firefox * / 
 -webkit-transition：color 0.5s linear; / * safari和chrome * / 
} 
 
 ul li a：hover {
 color：black; 
光标：指针; 
} 
  

http://jsfiddle.net/spacebeers/sELKu/3/

悬停的定义是：

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

blockquote>

根据该定义，悬停的相反点是鼠标而非的任何点。比我更聪明的人已经完成了这篇文章，在两种状态下设置了不同的转换 - 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; 
} 
  

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?

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?

jsFiddle

(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/

The definition of hover is:

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

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

这篇关于什么是相反的：悬停（鼠标离开）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！