：hover（在鼠标离开时）的反义词是什么？

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

例：

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

jsFiddle

（请记住，我不想仅回答此示例，而不想回答整个:hover问题。）

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

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

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

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

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

A:hover {
    color: #000;
}

现场演示

没有CSS中没有用于鼠标离开的显式属性。

您可以对所有其他元素使用：hover，但相关项目除外，以实现此效果。但是我不确定那将是多么实用。

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

您可以使用CSS3过渡

一些好的链接：

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

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

尽管这里的答案足够了，但我确实认为W3Schools在此问题上的示例非常简单（它立即消除了混乱（对我而言））。

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

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

例

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

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

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

将持续时间输入非悬停选项：

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

li a:hover {
  padding:19px;
}

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

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

你误会了:hover; 它表示鼠标在某个项目上，而不是鼠标刚刚进入该项目。

您可以将动画添加到选择器中，而无需:hover实现所需的效果。

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

相反的:hover似乎是:link。

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

例如，当定义规则.button:hover{ text-decoration:none }以删除按钮上的下划线时，当您在某些浏览器中滑下按钮时，下划线会显示出来。我已经用.button:hover, .button:link{ text-decoration:none }

当然，这仅适用于实际上是链接的元素（具有href属性）

只需在类的inicial上添加一个过渡和动画的名称，就您的情况而言，只需添加一个“ transition”属性，这就是您所需要的

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>