CSS過渡：多個過渡時的觸發順序

Question

演示

的HTML

<a href="#"><span>text insie span</span> |||| text inside anchor</a>

薩斯

span {
  transition: all 500ms ease;
}

a {
  transition: all 5000ms ease;

  &:hover {
    color: red;
  }
}

懸停時，忽略<span>在<a>上觸發第一個5000ms過渡。

完成后，在<span>上觸發500ms過渡

為什么會發生？ 他們不應該同時開始嗎？ 為什么<a> <span>的過渡延遲自己的持續時間？

Answer 1

由於span本身沒有:hover規則，因此瀏覽器會對此進行不同的處理。

Chrome只是選擇anchor ，但是在Firefox中，它實際上首先運行span ，然后anchor覆蓋它。

我不能說這是正確的，因為既涉及到屬性繼承，又不能使元素上的相同屬性具有不同的規則。

如果將:hover規則添加到span ，您將看到它按預期工作

請注意，您需要將span懸停，否則過渡不會發生任何變化

堆棧片段

 span { color: pink; transition: all 500ms ease; } span:hover { color: lime; } a { transition: all 5000ms ease; } a:hover { color: red; } 

 <a href="#"><span>text insie span</span> |||| text inside anchor</a>