隐藏的可见性不适用于具有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

我建议您在可以使用过渡使其平滑时使用不透明度属性，顺便说一句，它具有使用不透明度的缺点，可以隐藏元素，但仍具有可单击区域。

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

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