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和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和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年。问题已经由Microsoft解决，并且Edge在这种情况下的行为与其他任何浏览器一样。

案例已关闭。

MS Edge：CSS3过渡在元素内部链接中没有按预期工作

3 个答案: