Html 使用快速鼠标悬停/鼠标悬停的完整悬停动画持续时间？

我在图像上有悬停效果。如果您将鼠标移到它上面，并用鼠标停留在那里，转换将在给定的持续时间内执行

我也做了正确的过渡，当你离开现场

现在，我希望悬停转换以给定的持续时间开始，不管您是否在图像上快速悬停1毫秒

这是否只有在javascript中才能实现

.example { position: absolute;
             left: 0;
             height:320px;
             bottom: 0;
             width: 100%;
             background: #000;
             background-color: rgba(255, 255, 255, 0.4);
             opacity:0;
             -webkit-transition: background-color 2s ease-out;
             -moz-transition: background-color 2s ease-out;
             -o-transition: background-color 2s ease-out;
             -ms-transition: background-color 2s ease-out;

             transition: opacity 0.5s ease-in-out;
             -moz-transition: opacity 0.5s ease-in-out;
             -webkit-transition: opacity 0.5s ease-in-out;
             -o-transition: opacity 0.5s ease-in-out;
            -ms-transition: opacity 0.5s ease-in-out;
             transition: opacity 0.5s ease-in-out;
             text-align: center;
             line-height: 299px;
             text-decoration: none;
             color: #000000;
             font-size:30pt;
          }

   .image:hover .example { background-color: rgba(255, 255, 255, 0.4);
                         -webkit-transition: background-color 0.5s  ease-in-out;
                         -moz-transition: background-color 0.5s  ease-in-out;
                         -o-transition: background-color 0.5s  ease-in-out;
                         -ms-transition: background-color 0.5s ease-in-out;
                         transition: background-color 0.5s ease-in-out;
                         -webkit-transition: opacity 0.5s  ease-in-out;
                         -moz-transition: opacity 0.5s  ease-in-out;
                         -o-transition: opacity 0.5s  ease-in-out;
                         -ms-transition: opacity 0.5s  ease-in-out;
                         transition: opacity 0.5s ease-in-out;
                         opacity:1;
                       }

这样，如果我将鼠标悬停在图像上，我的文本和背景色将进入动画，而当我离开图像时，文本和背景色将退出动画。没问题。（尽管如此，我上面的代码目前还没有排序）

所以，我想要的是，淡入淡出动画将完全执行，即使我只是在图像上快速悬停并返回

---

我认为这是不可能的，是吗？（我的意思是只使用css）

恐怕您必须使用一点Javascript，因为据我所知，没有Javascript是不可能做到的

在悬停时添加一个类，并在动画结束时将其删除。请参阅此答案，了解如何执行此操作-

---

PS：我会把这当作一个评论，但我现在没有特权

OP正试图找出如何使用mouseover（大概还有mouseout）实现这一点。我修改了你发布的链接中的示例，以演示如何处理这些事件：谢谢@alex，我是否应该在答案中添加你的提琴，以防人们想在该事件中使用它？我将再次解释：如果我鼠标悬停，背景颜色将变暗，如果我不鼠标悬停，背景颜色将保持不变。如果我将鼠标移出，背景颜色将逐渐消失。这就是我代码的现状。现在，我希望它是这样的：如果我只做一个鼠标移动一毫秒，动画本身将只显示1毫秒。我希望它仍然完全淡入淡出。在第一个例子中，它几乎就是我想要的部分效果。如果将鼠标从左向右移动到所有框上。所有动画都将完全执行。对不起我的英语（顺便说一句；）所以，我的基本问题是，如果没有javascript，是否有可能。我想我必须使用js触发鼠标盖和鼠标出来淡入淡出bg颜色。我仍然不完全理解这个问题，请您创建一个提琴并向我们指出，以便我们可以为您提供一个有效的解决方案。