CSS：元素本身的过渡属性？

Question

如果我已将过渡属性应用于元素，则必须在样式标签中声明属性，但是如何将整个声明合并到元素的样式属性中？

localhost

div {
background-color: teal;
padding: 20px 20px 20px 20px;
transition: all 1s;
}
div:hover {
background-color: green;
}

在上面的示例中，是否可以通过在div元素的style属性中包含transition属性来简化代码？

Answer 1

您可以将所有声明包含在样式标签中。但是，伪类不能在元素的style属性中使用。

您可以使用以下代码段作为解决方法，也可以在课程样式表中对其进行定义。

<div style="width: 100%; height: 50px; background-color: red; transition: all 1s" onmouseover="this.style.backgroundColor='yellow';" onmouseout="this.style.backgroundColor='red';">
</div>