在 :hover 上的图像上显示 <div> 或 <span>答案

【问题标题】：Display <div> or <span> over image on :hover在 :hover 上的图像上显示 <div> 或 <span>
【发布时间】：2014-02-17 17:52:17
【问题描述】：

我正在寻找一种方法，当您在该图像上:hover 时，该方法允许div 或span 元素出现在该图像上。我可以使用.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 显示我到目前为止所拥有的。

【问题讨论】：

看看我前段时间给的this answer；它正在使用:after 伪元素.. 你想要那些长的东西，还是你想要实际的内容是一个 DOM 元素？
@JoshC 这正是我正在寻找的几乎，但我需要将实际内容作为 DOM 元素。附：我喜欢你回答问题的速度:)

标签： html image css hover

【解决方案1】：

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

EXAMPLE HERE

HTML 结构：

<div class="image">
    <img src="..." />
    <div class="overlay">The content to be displayed on :hover</div>
</div>

通用 CSS：

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

.image {
    position:relative;
    display:inline-block;
}
.overlay {
    display:none;
}
.image:hover .overlay {
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;

    /* All other styling - see example */

    img {
        vertical-align:top; /* Default is baseline, this fixes a common alignment issue */
    }
}

【讨论】：