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

2022-01-22 00:00:00 image hover html css

我正在寻找一种方法，当您在图像上 :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:边框框；框尺寸:边框框；/* 所有其他样式 - 参见示例 */图像{垂直对齐:顶部；/* 默认是基线，这修复了一个常见的对齐问题 */}}

I'm looking for a method that would allow a div or span element to appear over a image when you :hover over that image. I'm able to do this using the .image:hover ~ .overlay, but it's not exactly what I'm looking for. The div or span element needs to take the dimensions of the images, since there will be multiple sizes.

Example

<img width="200" height="200"/> would allow you to :hover changing the div or span element from display: none to display: block (doesn't necessarily need to be a block). The element that's being changed from invisible to visible would have to automatically detect the size of the image and match the size of the element to these same dimensions (200x200). However, I could also have a <img width="300" height="400"/> that would need the element to match the size (300x400).

I'm also looking for a super easy way for these elements to be positioned perfectly over the images.

Here's my code pen to show what I've got so far.

解决方案

Similarly to this answer I gave, you could absolutely position the .overlay element relative to the parent element and give it a height and width of 100% this should work for all img sizes given that the parent element will be inline-block (it's the same size as its containing elements).

EXAMPLE HERE

HTML Structure:

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

General CSS:

Hide the .overlay element by default, and use the selector .image:hover .overlay to change the styling on hover. Due to the HTML structure, this works well because .overlay is a descendant element. You can therefore avoid using the the general/adjacent sibling combinators +, ~. Box-sizing is used to calculate the element's dimensions with respect to border, padding.. etc.

.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 */
    }
}

相关文章