MS Edge:CSS3转换在元素内部链接中无法正常工作

Question

我有一个内部元素的链接（我们称其为bob）。鲍勃是链接的明星，所以他想散发一些不同的闪耀。

该链接具有一些CSS3转换，以创建淡出效果。鲍勃（Bob）也具有淡淡的效果，因此他仍然可以成为链接的光辉元素。

一个重要的一点是: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和Bob都有过渡。相关的CSS非常简单，例如：

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

然后他们只有不同的颜色，因此您可以看到淡入淡出的动画

这是一个JSfiddle，因此您可以认识Bob：https://jsfiddle.net/cthulhu/9vv7v6gd/

如果您在MS Edge中进行测试，您将看到Bob在过渡期间如何消失，我们不希望BOB消失。如果您更改BOB和a之间的过渡时间，它甚至会变得怪异，但是现在让它保持简单。

有什么想法？

Answer 1

我今天也有同样的问题。我通过更具体的过渡属性解决了它

{ transition: all 0.5s ease 0s; }

更改为

之类的东西

{ transition: color 0.5s ease 0s; }

Answer 2

解决此问题的方法是将过渡结果添加到元素中。

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

Answer 3

这是2019年。

案例关闭。