CSS過渡：點火的訂單時，多個過渡

HTML

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

SASS

span { 
    transition: all 500ms ease; 
} 

a { 
    transition: all 5000ms ease; 

    &:hover { 
    color: red; 
    } 
}

當懸停，第一個5000毫秒過渡上<a>忽略<span>解僱。

它完成後，觸發上<span>

爲什麼會發生500ms的過渡？他們不應該同時開始嗎？爲什麼<a>延遲<span>的過渡時間？

來源

2017-06-20 knitevision

span標籤嵌套在a標籤中，這意味着父元素樣式將首先應用。 – sk03

我還是不明白爲什麼延遲。 @ Kyle1323 – knitevision

你是否試圖讓他們在同一時間開火，並且都是紅色的？ – sk03

由於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>

來源

2017-06-20 17:31:12 LGSon

CSS過渡：點火的訂單時，多個過渡

回答

相關問題