在图像上显示<div>或<span>：悬停</span> </div>

Question

我正在寻找一种方法，当div覆盖该图像时，该元素会在图像上显示span或:hover元素。我可以使用.image:hover ~ .overlay执行此操作，但这并不是我正在寻找的内容。 div或span元素需要采用图片的尺寸，因为会有多种尺寸。

实施例

<img width="200" height="200"/>允许您:hover将div或span元素从display: none更改为display: block（不一定需要是一个块）。从不可见变为可见的元素必须自动检测图像的大小，并将元素的大小与这些相同的维度（200x200）相匹配。但是，我也可能需要一个<img width="300" height="400"/>元素来匹配大小（300x400）。

我也在寻找一种超级简单的方法，让这些元素完美地定位在图像上。

Here's my code pen显示我到目前为止所做的事情。

Answer 1

与我提供的this answer类似，您可以绝对定位.overlay元素相对于父元素，并为其指定100%的高度和宽度，这应适用于所有{{1}如果父元素为img（它与包含元素的大小相同），则为size。

EXAMPLE HERE

HTML结构：

inline-block

一般CSS：

默认隐藏<div class="image"> <img src="..." /> <div class="overlay">The content to be displayed on :hover</div> </div> 元素，并使用选择器.overlay更改悬停时的样式。由于HTML结构，这很好用，因为.image:hover .overlay是后代元素。因此，您可以避免使用通用/相邻兄弟组合器.overlay，+。 Box-sizing用于计算元素相对于边框，填充等的尺寸。

~