与之相反的是:悬停(鼠标离开)？

Question

有没有办法:hover 只使用 CSS？如:如果:hover是on Mouse Enter,是否有CSS相当于一个on Mouse Leave？

例:

我有一个使用列表项的HTML菜单.当我将鼠标悬停的项目之一,有来自CSS彩色动画#999来black.当鼠标离开项目区域时,如何创建相反的效果,动画从？black到#999？

的jsfiddle

(请记住,我不想只回答这个例子,而是整个"相反的:hover"问题.)

Answer 1

如果我理解正确,你可以通过将转换移动到链接而不是悬停状态来做同样的事情:

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

Answer 2

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

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

A:hover {
    color: #000;
}

现场演示

Answer 3

相反的是使用 :not

例如

selection:not(:hover) { rules }

Answer 4

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

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

li a:hover {
  padding:19px;
}

Answer 5

在CSS中没有鼠标离开的显式属性.

您可以使用:将鼠标悬停在除相关项目之外的所有其他元素上以实现此效果.但我不确定会有多实用.

我想你必须看一下JS/jQuery解决方案.

Answer 6

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

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