css - 在 :hover 上显示带有 GIF 的无 JS 响应图像

Question

目标:在不超过容器宽度的悬停上显示带有动画的静态图像。

固定代码:

/* wrapper paragraph*/
.rimg {
	text-align: center;
	overflow: hidden;
}
/* rely on contents for vertical size, show backgrund centered */
.rimg-gif, .rimg-png {
	display: block;
	position: relative;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	line-height: 0;
}
/* containers need max-width in IE */
.rimg img, .rimg-gif, .rimg-png {
	margin: 0;
	max-width: 99.99999%; /* Opera Mini ignores anything above this % */
	max-width: calc(100% - 0px); /* for proper browsers */
}
/* hide the GIF background unless hovered */
.rimg-gif:not(:hover) {
	background-image: none !important;
}
/* hide the static image when hovered */
.rimg-gif:hover img {
	opacity: 0;
}

<p class="rimg">
  <span class="rimg-png" style="background-image:url(https://i.imgur.com/iwczbln.png)">
    <a class="rimg-gif" target="_blank" href="https://i.imgur.com/TLxp2di.gif" style="background-image:url(https://i.imgur.com/TLxp2di.gif)">
      <img src="https://i.imgur.com/iwczbln.png">
    </a>
  </span>
  Description
</p>

最终结构:

• .rimg 只是一个用于居中对齐的容器元素。
• img 是静态图像(用于语义、打印和默认显示)。它在悬停时通过不透明度隐藏，允许使用上下文菜单获取 GIF(“链接”)和静态 PNG(“图像地址”)的 URL。
• .rimg-gif 是悬停时显示的动画背景 GIF(同时隐藏静态图像)。它直到悬停才加载。兼作指向实际 GIF 的链接(适用于移动用户)
• .rimg-png 有一个静态背景，只是为了让读者不会在 GIF 完成加载第一帧之前看到图像短暂闪烁。

这有一些问题:

• 在 IE<=11(非 Edge)中完全调整大小以适应宽度是行不通的 - 元素会溢出容器。

  向嵌套 block 添加“max-width: 100%”修复了此问题 (by this explanation)。

• Opera Mini 同样不会调整图像大小以适应容器宽度，但上述针对 IE 的修复无效。

  我找不到对此的任何解释，但事实证明 Opera Mini 只是简单地忽略了大约等于 100% (>99.99999%) 的最大宽度值。所以我为 Opera 添加了它，为现代浏览器添加了 max-width: calc(100% - 0px)。

• 在 StackOverflow 的代码片段预览中，计算出的高度略高于图像的高度，这可以从它在底部短暂开始重复看到。通过将 line-height: 0 提供给 .rgif-alt，问题就消失了，但我不确定这是否是 hack。

  编辑:显然是这样？其他选项包括 float 元素和使用 position: absolute，所以我猜 line-height 对元素来说很合适

其他详细信息:

• HTML 是从 markdown[-ish] 扩展生成的，因此它看起来是否令人讨厌并不重要。不过，我希望尽可能避免将图像尺寸/纵横比硬编码到生成的 HTML 中。
• 尝试在请求(鼠标悬停)之前不加载动画 GIF，因此 two-image trick是不可取的。
• 之所以避免使用 JS，是因为包含此类元素的页面可以在完全禁用 JS 的嵌入式浏览器中显示。可以想象，为每个动画打开一个弹出窗口(或默认浏览器的选项卡)是不可取的。

如果有任何不清楚的地方，请告诉。

Answer 1

经过一些尝试和错误后，我设法自己解决了问题，因此我在问题的解决方案和最终(工作)代码中添加了注释。

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