显示 <div>或&lt;跨度&gt;在图像上:悬停

问题描述

我正在寻找一种方法，当您在图像上 :hover 时，该方法将允许 div 或 span 元素出现在图像上图片.我可以使用 .image:hover ~ .overlay 来做到这一点，但这并不是我想要的.div 或 span 元素需要获取图像的尺寸，因为会有多种尺寸.

示例

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

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

这是我的代码笔，以展示我目前的成果.

类似于 this answer 我给了，你绝对可以将 .overlay 元素相对于父元素定位，并给它一个 100% 这应该适用于所有 img 大小，因为父元素将是 inline-block (它的大小与其包含的元素相同).

此处示例

HTML 结构:

通用 CSS:

默认隐藏 .overlay 元素，并使用选择器 .image:hover .overlay 更改悬停样式.由于 HTML 结构，这很有效，因为 .overlay 是一个后代元素.因此，您可以避免使用通用/相邻兄弟组合符 +、~.Box-sizing 用于计算元素在边框、内边距等方面的尺寸.

.image {位置:相对；显示:内联块；}.overlay {显示:无；}.image:悬停 .overlay {宽度:100%；高度:100%；背景:rgba(0,0,0,.5);位置:绝对；顶部:0；左:0；显示:内联块；-webkit-box-sizing:边框框；-moz-box-sizing:边框框；框尺寸:边框框；/* 所有其他样式 - 参见示例 */图像{垂直对齐:顶部；/* 默认是基线，这修复了一个常见的对齐问题 *
The End