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

小编典典

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

css

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

例：

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

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

阅读 1851

2020-05-16

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

悬停的定义是：

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

2020-05-16