MS Edge：リンク内の要素でCSS3遷移が期待通りに機能しない

Question

要素が内部にあるリンクをBobにします。ボブはリンクのスターですから少し違った輝きを放っています。

リンクには、フェード効果を作成するためのCSS3トランジションがいくつかあります。ボブもフェード効果があるので、彼は依然としてリンクの輝かしい要素になることができます。

重要な点は、:hoverがコンテナ（この例ではdiv）に関連していることです。このようにする必要があります。

Firefox、Chrome、IEではうまく動作しますが、Microsoft EdgeではBobの輝きが嫌いです。トランジション中、ボブは消えるだけでどこに行くのか分かりません。

は、ここで例のHTMLです：

<div> 
    <a href="#1"> 
    <span class="Bob">Bright like a diamond!</span> 
    <p>Random text</p> 
    </a> 

    <a href="#2">Other random stuff, who cares...</a> 
</div> 

:hover遷移がdiv上で、両方aとボブは、遷移を有します。関連するCSSは非常に簡単で、何かのように： https://jsfiddle.net/Cthulhu/9vv7v6gd/

の場合：あなたはボブを満たすことができるようにあなたが

ここJSFiddleをだフェードアニメーションを見ることができるので、その後

div:hover .Bob { transition: all 0.5s ease 0s; } 
.Bob { transition: all 0.5s ease 0s; } 
div:hover a { transition: all 0.5s ease 0s; } 
a { transition: all 0.5s ease 0s; } 

彼らはさまざまな色を持っていますMS Edgeでテストすると、移行中にBobがどのように消えるかがわかります。ボブとaの間の遷移時間を変更すると、それはより奇妙なものになりますが、今のところ単純にしておきましょう。

アイデア？

Answer 1

今日は同じ問題がありました。私はこの問題を解決する方法は要素への移行の結果を追加することである

{ transition: color 0.5s ease 0s; } 

Answer 2

のようなものに変更

{ transition: all 0.5s ease 0s; } 

より具体的な遷移プロパティで、それを解決しました。

div:hover a { 
    /* for example, if blue text was the desired transition. */ 
    color: blue; 
}