如何在CSS转换之前触发一些javascript？

我有一个元素，当它旁边的另一个元素悬停时，它的宽度会增加，即

.div2{
宽度：0px；
显示：无；
过渡：宽度2s；
}
.div1:悬停~.div2{
宽度：100px；
}

我想在CSS转换之前，将显示更改为鼠标上方的块。然后，类似地，我想在CSS转换完成后将显示改回无。我尝试使用

.onmouseover

将显示设置为block，但它在CSS转换后进行了设置

---

有没有办法在CSS转换之前将显示设置为阻止？

正如我理解您的问题一样，您可以有两个类，一个用于隐藏（显示：无），另一个用于可视化隐藏（可能是可见性：隐藏）。悬停时使用visualy hidden类使css转换生效（借助JavaScript添加此类）。您必须在这里获得setTimeout的帮助（10毫秒）才能添加另一个实际实现css转换的类。取消悬停时，您需要再次循环逻辑。希望它能帮助

css和javascript不要相互通信。但是，你可以通过javascript将css类添加到你的html中，这样事情就可以按你想要的顺序发生。你能发布你所尝试的所有代码吗，你在问题中提到的是。。。。“我尝试使用.onmouseover将显示设置为block，但它是在CSS转换之后设置的。”您肯定在寻找：hover{display:block；}？@mwilson如何按顺序添加类？我尝试过这样做（我在这里使用jQuery，因为它更简单）

$（.div2”）.on（“mouseover”，function（）{$（.div1”）.addClass（“div1--block”）；$（.div1”）.addClass（“div1--100w”）

添加一个类后是否需要添加一个小延迟？@BenjaminJamesKippax否，因为如果我使用

：hover{display:block；}

，宽度的转换实际上不起作用（我忘了在post中包含转换，我将在中编辑它）