在悬停时显示图像预览（仅限HTML）

Question

虽然使用CSS / JS有很多方法可以做到这一点，但有没有办法只使用HTML？

我想要这个的原因是因为它使复制更加容易。

Answer 1

仅使用HTML无法做到这一点。抱歉，你至少需要CSS或JavaScript。你可能能够接近CSS。

Answer 2

我认为只有HTML才有可能。

我想解决这个问题：

  

我想要这个的原因是因为它使复制更加容易。

首先，它没有。

通过分离CSS和HTML，每次要复制任何实例时，实际上复制的次数都会减少。

例如：

CSS：

 img{display:none;}
 a:hover + img {display:block; width:100px; height:100px; background:black;}

HTML：

 img{display:none;}
 a:hover + img {display:block; width:100px; height:100px; background:black;}

Demo

现在，如果您想要其他图片，只需将HTML复制并粘贴到它旁边即可。

然而，分离内容和风格的真正好处是能够编辑一次并改变一切。

如果我在网站上的三个页面上有五十张图像，并且我想为它们添加边框，我将不得不手动进入每个页面并更改每个实例。

使用CSS，我可以在一个文件中更改一行，并且它们都会更新。

但是，对于这个特殊问题，我会研究一个Javascript解决方案。理想情况下，除非调用它们，否则不会加载图像预览，这超出了CSS的范围。