Question

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

如果我们有这个CSS定义设置，它将应用到所有元素的转换：

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

如何覆盖文本元素的CSS过渡效果，以便所有文本都不会应用过渡？注意，这涵盖了所有元素，如p，h1，h2，h3，h4，h5，h6等，以及包含文本的元素，例如我的一些怪异的文本。

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

＆＃13;

* {
  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;
}

＆＃13;

<!DOCTYPE html>
<html>
  <body>
    <div class="egodiv">Look at me now!</div>
  </body>
</html>

＆＃13;

Answer 1

试试这个：

* {
  transition: all 0.35s ease-in-out;
}

.egodiv {
  font-size: 12px;
  color: black;
  background-color: white;
  transition:none; // override transition
}

.egodiv:hover {
  font-size: 20px;
  color: white;
  background-color: red;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="egodiv">Look at me now!</div>
  </body>
</html>

Answer 2

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

＆＃13;

* {
  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;
}

＆＃13;

<div class="egodiv">Look at me now!</div>

＆＃13;

我认为你想要禁用过渡的font-size。

如何覆盖特定元素的CSS转换？

2 个答案: