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

悬停的定义是:

:hover选择器用于将元素悬停在元素上时选择它们。

根据该定义,悬停的反义词是鼠标

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

解决方法

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

例:

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

(请记住,我不想仅回答此示例,而不想回答整个:hover问题。)