显示< div>或< span>在图像上：徘徊 [英] Display <div> or <span> over image on :hover

问题描述

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

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.

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

<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.

推荐答案

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

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).

此处的示例

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 是一个后代元素。因此，您可以避免使用一般/相邻同胞组合器 + ，〜。框尺寸用于计算元素相对于边框，填充等的尺寸。

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

这篇关于显示< div>或< span>在图像上：徘徊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！