gpt4 book ai didi

css - 如何覆盖特定元素的 CSS 转换?

转载 作者:行者123 更新时间:2023-11-28 07:11:12 25 4
gpt4 key购买 nike

我想知道是否有一种快速/智能的方法来覆盖 HTML 文档中特定元素的 CSS 转换?

如果我们有这个 CSS 定义设置,它将对所有元素应用过渡:

* {
transition: all 0.35s ease-in-out;
}

我如何覆盖文本元素的 CSS 过渡效果,以便所有文本都不会应用过渡效果?请注意,这涵盖了所有元素,例如 p、h1、h2、h3、h4、h5、h6 等,以及包含文本的元素,例如 I'm some freaky text。

以下代码片段是不应发生的示例。背景颜色变化过渡是预期发生的情况,但文本不应过渡。

* {
transition: all 0.35s ease-in-out;
}

.egodiv {
font-size: 12px;
color: black;
background-color: white;
}

.egodiv:hover {
font-size: 20px;
color: white;
background-color: red;
}
<!DOCTYPE html>
<html>
<body>
<div class="egodiv">Look at me now!</div>
</body>
</html>

最佳答案

为特定样式关闭过渡的唯一方法是完全重新定义过渡属性。只要您知道原始转换值就可以:

* {
transition: all 0.35s ease-in-out;
}

.egodiv {
font-size: 12px;
color: black;
background-color: white;
transition: all 0.35s ease-in-out, font-size .01s linear;
}

.egodiv:hover {
font-size: 20px;
color: white;
background-color: red;
}
<div class="egodiv">Look at me now!</div>

我假设这是您要禁用过渡的font-size

关于css - 如何覆盖特定元素的 CSS 转换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32634068/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com