Javascript 在过渡效果停止工作后恢复过渡效果

好的，如果通过CSS在样式上设置了一个转换，只要该样式没有被Javascript更改，它就会工作并保持工作状态（然后转换就会停止），即使Javascript将原始属性恢复为其以前的值

在一种风格被“触动”后，有没有办法恢复过渡

例如，一旦Javascript将宽度设置为100px（这是CSS值），转换就会停止

var el=document.getElementById（“测试”）；
el.style.width=“100px”
div{
宽度：100px；
高度：100px；
背景：红色；
-webkit过渡：宽度2s；/*适用于Safari 3.1到6.0*/
过渡：宽度2s；
}
div:悬停{
宽度：300px；
}
您可以用
覆盖内联样式！重要信息

div:hover {
    width: 300px !important;
}

您可以使用
覆盖内联样式！重要信息

div:hover {
    width: 300px !important;
}

它本身并没有停止，JavaScript只是将宽度作为内联CSS放置，内联CSS具有最高的特异性（除了
！important
），因此悬停宽度将不起作用，因为它的特异性较弱。一种解决方法是使用
！重要信息
，但我不建议这样做。尝试删除JS样式或处理类转换


var el=document.getElementById（“测试”）；
el.style.width=“100px”
div{
宽度：100px；
高度：100px；
背景：红色；
-webkit过渡：宽度2s；/*适用于Safari 3.1到6.0*/
过渡：宽度2s；
}
div:悬停{
宽度：300px！重要；
}
它本身并不停止，JavaScript只是将宽度作为内联CSS放置，内联CSS具有最高的特异性（除了
！important
），因此悬停宽度将不起作用，因为它的特异性较弱。一种解决方法是使用
！重要信息
，但我不建议这样做。尝试删除JS样式或处理类转换


var el=document.getElementById（“测试”）；
el.style.width=“100px”
div{
宽度：100px；
高度：100px；
背景：红色；
-webkit过渡：宽度2s；/*适用于Safari 3.1到6.0*/
过渡：宽度2s；
}
div:悬停{
宽度：300px！重要；
}
当您使用
el.style.width=“100px”
硬连线宽度时，它将覆盖您的
div:hover
CSS规则，因此它将不再具有优先级

您需要增加
：hover
CSS规则的优先级，以便它仍然有效。你可以通过多种方式做到这一点。一种方法是使用
！重要信息
。通常，我不喜欢使用
！重要信息
，但在这种情况下，如果没有它，很难覆盖直接指定样式的优先级

div:hover {
    width: 300px !important;
}

您可以阅读有关如何计算CSS特异性以确定优先顺序的内容。不幸的是，直接指定的样式规则具有非常高的优先级

这是一个有效的演示：


var el=document.getElementById（“测试”）；
el.style.width=“100px”
div{
宽度：100px；
高度：100px；
背景：红色；
-webkit过渡：宽度2s；/*适用于Safari 3.1到6.0*/
过渡：宽度2s；
}
div:悬停{
宽度：300px！重要；
}
当您使用
el.style.width=“100px”
硬连线宽度时，它将覆盖您的
div:hover
CSS规则，因此它将不再具有优先级

您需要增加
：hover
CSS规则的优先级，以便它仍然有效。你可以通过多种方式做到这一点。一种方法是使用
！重要信息
。通常，我不喜欢使用
！重要信息
，但在这种情况下，如果没有它，很难覆盖直接指定样式的优先级

div:hover {
    width: 300px !important;
}

您可以阅读有关如何计算CSS特异性以确定优先顺序的内容。不幸的是，直接指定的样式规则具有非常高的优先级

这是一个有效的演示：


var el=document.getElementById（“测试”）；
el.style.width=“100px”
div{
宽度：100px；
高度：100px；
背景：红色；
-webkit过渡：宽度2s；/*适用于Safari 3.1到6.0*/
过渡：宽度2s；
}
div:悬停{
宽度：300px！重要；
}
或许也值得一读：@CBroe:谢谢你的链接！或许也值得一读：@CBroe:谢谢你的链接！非常感谢。虽然我还不完全理解为什么“悬停”被覆盖；它的宽度在样式表中是一个单独的条目。@ThomasAn-如果您阅读了我在回答中提供的CSS专用性链接，它将解释当有多个设置试图控制同一属性时，浏览器如何决定应用哪个CSS设置。在您的例子中，有三个设置都试图控制宽度，CSS中的
div
规则、CSS中的
div:hover
规则和元素上的直接样式设置。这些都是竞争对手。每个规则的CSS特异性计算确定哪个具有更高的优先级。正如您所看到的，直接样式属性设置以更高的CSS特异性获胜。我想这是目前让我感到困惑的逻辑。当我们设置CSS div width，然后设置div:hover时，从技术上讲，这两个选项也会相互竞争，但它仍然知道如何应用悬停效果。。。然而，如果我们修改宽度，它突然无法解决悬停仍然处于打开状态的问题。我想它希望在每次它的一个组件在其他地方更改时通过Javascript重新指定：hover。（如果我想避免使用！重要的hack）@ThomasAn-
div:hover{width:300px}
比
div{width:100px；}
具有更高的CSS特异性，因此，当
div:hover
处于活动状态时，它将赢得比赛。但是一个直接应用的样式比任何一个CSS规则都有更高的CSS特性，所以每次都会赢。CSS特异性是一个公式