CSS：元素本身的过渡属性？ [复制]

Posted 2023-03-05

【中文标题】CSS：元素本身的过渡属性？ [复制]

【英文标题】：CSS: transition properties in element itself? [duplicate]

【发布时间】：2018-12-09 19:53:36

【问题描述】：

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

div 
background-color: teal;
padding: 20px 20px 20px 20px;
transition: all 1s;

div:hover 
background-color: green;

<div></div>

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

【问题讨论】：

但是悬停:hover呢？？

@לבנימלכה 这就是问题所在

另请阅读：***.com/questions/8284365/…

@Abhishek 我的意思是，如果你已经准备好了 css，为什么还要在标签内这样做？？？

我们没有任何方法可以在内联 css 中使用伪。 ***.com/a/1033166/7512762

【参考方案1】：

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

您可以使用下面的 sn-p 作为解决方法，或者在样式表中定义它。

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

【讨论】：

谢谢你，它的 js 但它有帮助

如果你不想使用 css 你必须使用 js/jquery 来实现鼠标悬停事件

@AnkitSharma 好的兄弟，你做得很好