分离悬停和非悬停状态的转换答案

【问题标题】：separating transition for hover and non-hover state分离悬停和非悬停状态的转换
【发布时间】：2020-09-25 08:39:34
【问题描述】：

这是一个示例div-

$("div").css("opacity","1");

div {
  background: red;
  height: 100px;
  opacity: 0;
  transition: all 0.2s 2.7s ease;
}
div:hover {
    background-color: blue;
    transition: all 0.2s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div>
  </div>
</body>

最初我看到 div 的 transition 属性推翻了它的 hover 转换（它继承自 body），但我通过为 :hover 状态单独指定它来使其工作。现在虽然它在悬停时会立即改变颜色，但是当鼠标离开时，它需要2.7s 才能恢复。即使是关键字!important 也没有影响。是什么导致了这个问题？

【问题讨论】：

标签： html css css-transitions pseudo-class

【解决方案1】：

我可能没有正确理解这个问题。但这就是你要找的吗？

$("div").css("opacity","1");

div {
  background-color: red;
  height: 100px;
  opacity: 0;
}
div:hover {
    background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div>
  </div>
</body>

【讨论】：

没有。我更正了“虽然……”这行，请再读一遍。 hover 转换的开始不需要时间（如所愿），但 mouseleave 事件需要 2.7s 发生。 2.7s 是 div 非悬停状态的延迟时间。
@Sapinder 因此，当您将鼠标悬停在 div 上时，您希望它无需时间进行转换吗？但是，当您将鼠标移开（不再悬停在 div 上）时，您希望它对 background-color 有一个转换延迟？
没有。我希望悬停过渡就像无延迟地更改颜色一样简单。但是某些原因导致它延迟了 mouseleave 转换回原始颜色。那是我不想要的2.7s。
@Sapinder 好的，所以我已经编辑了我的答案，但仍然认为我没有关注...您可以删除transition，这首先会导致延迟从@ 987654332@ 以防止在将鼠标移开或从div:hover 移开鼠标时出现延迟。
如果我不想，我不会使用它。我想要一些解决方案来将div 的悬停和非悬停转换设置为单独的延迟。

【解决方案2】：

尝试删除transition 属性并尝试一次。

试试这个链接：

https://codepen.io/sateesh-gollapudi/pen/RwrPWLY?editors=1100

【讨论】：

【解决方案3】：

去掉div过渡的2.7s。

改变

transition: all 0.2s 2.7s ease;

到

transition: all 0.2s ease;

$("div").css("opacity","1");

div {
  background: red;
  height: 100px;
  opacity: 0;
  transition: all 0.2s ease; /* Remove 2.7s */
}
div:hover {
    background-color: blue;
    transition: all 0.2s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div>
  </div>
</body>

【讨论】：

【解决方案4】：

这里已经分享了多个答案，延迟和没有延迟，以避免 2.7 秒的延迟。问题还不是很清楚。

这里是过渡属性，您可以将其用作“过渡：”的简写 -

过渡属性
过渡持续时间
过渡定时功能
转换延迟

transition: 属性持续时间计时函数延迟|initial|inherit;

相应地使用值以获得所需的结果。

【讨论】：