隐藏的可见性在带有 CSS 内容的 Microsoft Edge 上不起作用：url();

Question

见小提琴： https://jsfiddle.net/8wk0tsnL/8/

有问题的部分是这个（适用于 FF、Chrome、IE，但不适用于 Edge）：

.testclass:after {
  content: url(http://placekitten.com/96/139);
  visibility:hidden;
}

.testclass:hover:after, .testclass:hover:before {
  visibility:visible;
}

图像没有隐藏在 Edge 中。如果将content: url(...); 替换为文本字符串content: "example";，它在Edge 中可以正常工作。

这是一个错误吗？任何已知的解决方法？

（Edge 的浏览器市场份额不到 5%，所以我不想用非常奇特或支持稀少的解决方案污染我的代码）。

Answer 1

我建议你使用 opacity 属性，一旦你可以使用过渡使其平滑，顺便说一下，使用 opacity 有一个缺点，它隐藏元素但仍然具有可点击区域。

.testclass:after{
   content: url(http://placekitten.com/96/139);
   opacity: 0;
}

.testclass:hover:after{
   opacity: 1;
}