css - 禁用子元素的继承属性的顺序转换

Question

看这个例子:

http://jsbin.com/teqifogime/edit?html,css,output

在第一个 block 中，文本颜色随着背景颜色的过渡而变化，因为它是从其父级继承的。

第二个 block 中的文本颜色仅在其父元素完成转换后才会转换。

将使用大量过渡且看起来像是意外行为的东西组合在一起时，这可能会令人沮丧。有什么办法解决这个问题吗？

HTML

  <div class="block block-one">
    <h2>Color Test</h2>
  </div>
  <div class="block block-two">
    <h2>Color Again</h2>
  </div>

CSS

.block {
  width: 200px;
  margin: 20px auto;
  background-color: pink;
  text-align: center;
  padding: 10px;
  transition: 1s;
}

h2 {
  transition: 1s;
}

.block-one:hover {
  background-color: wheat;
}

.block-one:hover h2 {
  color: azure;
}

.block-two:hover {
  color: azure;
  background-color: wheat;
}

编辑

为了清楚起见:在我的真实场景中，我有一堆具有自己的过渡属性的 CSS 组件，其中一些最终以这种奇怪的方式“链接”。我最终需要制定一系列特定的规则和异常(exception)情况才能获得我认为应该是默认行为的行为。也许我的问题更多是关于 CSS 的本质——如果有某种原因导致事情以这种方式工作

Answer 1

有点不清楚你在问什么，但我认为从 .block-two 的 h2 中删除 transition 应该可以把戏。

您有一些选择:

第一

.block-one h2 {
  transition: 1s;
}

第二

.block-two h2 {
  transition: 0s;
}

第三

.block-two-title {
  transition: 0s;
}

第四名

.block-title--transition {
  transition: 1s;
}

这是第二个:

.block {
  width: 200px;
  margin: 20px auto;
  background-color: pink;
  text-align: center;
  padding: 10px;
  transition: 1s;
}

h2 {
  transition: 1s;
}

.block-one:hover {
  background-color: wheat;
}

.block-one:hover h2 {
  color: azure;
}

.block-two:hover {
  color: azure;
  background-color: wheat;
}

.block-two h2 {
  transition: 0s;
}

<div class="block block-one">
  <h2 class="block-title--animated">Color Test</h2>
</div>
<div class="block block-two">
  <h2>Color Again</h2>
</div>