时间戳

首页 > 解决方案 > border-bottom CSS 规则不会在鼠标关闭时转换，但会在悬停时转换

html - border-bottom CSS 规则不会在鼠标关闭时转换，但会在悬停时转换

问题描述

当我尝试在鼠标打开和鼠标关闭导航项时应用过渡时，该项目仅使用鼠标打开的过渡，而不是鼠标关闭。

https://jsfiddle.net/grflint2/hp4qfma5/ 有这方面的代码。我正在使用选择transition: border-color 0.1s, padding 0.1s;器:hover和普通选择器，但它仍然无法正常工作。

我希望它以与将鼠标悬停在其上时相同的方式过渡。为什么不这样做？

标签： htmlcss

解决方案

您错误地设置了过渡。你使用了“padding”这个词而不是“padding-bottom”。无论如何，您可以将所有名称一起删除并输入“全部”，因为它们的时间相同。因此，例如，您可以更改具有以下代码的行

      transition: border-color 0.1s, padding 0.1s;

改为下面的代码......（我放慢了速度，以便可以看到变化）

     transition: all .5s;

推荐阅读