Css 显示GIF的JS响应性较差的图像：悬停

目标：静态图像，动画显示在：悬停，不超过容器宽度

固定代码：

/*包装段落*/
里姆先生{
文本对齐：居中；
溢出：隐藏；
}
/*根据内容的垂直大小，以居中显示背景*/
.rimggif、.rimgpng{
显示：块；
位置：相对位置；
背景尺寸：自动100%；
背景位置：中心；
背景重复：无重复；
线高：0；
}
/*集装箱在IE中需要最大宽度*/
.rimg img、.rimg gif、.rimg png{
保证金：0；
最大宽度：99.99999%；/*Opera Mini忽略超过此百分比的任何内容*/
最大宽度：calc（100%-0px）；/*适用于适当的浏览器*/
}
/*除非悬停，否则隐藏GIF背景*/
.rimg gif:不（：悬停）{
背景图像：无！重要；
}
/*悬停时隐藏静态图像*/
.rimg gif：悬停img{
不透明度：0；
}

描述

经过一点尝试和错误之后，我设法自己解决了问题，因此我在问题中添加了关于解决方案和最终（工作）代码的注释

我对在Android上打开一个新的标签不是100%满意（理想情况下应该在点击时播放），但所有测试过的浏览器在按下后退键时都会关闭这样的弹出标签，所以可能还不算太糟糕。我添加了一个“播放”按钮，它还兼作移动设备的第一次触摸事件吸收器（最初完全覆盖链接，在短暂延迟后调整为0%宽度，以允许单击链接）。这既适用于现代浏览器（第一次点击时触发悬停和动画播放，第二次点击时可以打开链接），也适用于Opera Mini（只需打开带有GIF的弹出选项卡）。例如，你可以在行动中看到这一点