这里是样本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也没有影响。是什么原因引起的？
我可能无法正确理解问题。但这是您要寻找的吗？
$("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>从div的过渡中删除2.7s。
更改
transition: all 0.2s 2.7s ease;
to
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>[不幸的是，这里没有人可以提供我想要的解决方案。但是我partly通过指定特定的属性名称解决了它：
div {
transition: opacity 0.2s 2.7s ease;
}
div:hover {
transition: background-color 0.2s ease;
}
我想保留div本身的延迟，但是除非我使用上述方法，否则它还会影响悬停过渡。现在，延迟在mouseenter过渡中消失了，但是mouseleave事件突然改变了颜色，而没有任何过渡。不知道发生了什么！
$("div").css("opacity","1");div {
background: red; height: 100px;
opacity: 0;
transition: opacity 0.2s 2.7s ease;
}
div:hover {
background: blue;
transition: background-color 0.2s ease;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div></div>
</body>这里已经共享了多个答案，并且没有延迟，可以避免2.7秒的延迟。问题仍然不是很清楚。
这里是过渡属性，您将其与'transition：'-]一起用作速记
过渡：属性持续时间计时函数延迟|初始|继承；
相应地使用值以获得所需的结果。