Html 在图像上显示 <div> 或 <span> :hover
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21371594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display <div> or <span> over image on :hover
提问by Matthew Beckman
I'm looking for a method that would allow a divor spanelement to appear over a image when you :hoverover that image. I'm able to do this using the .image:hover ~ .overlay, but it's not exactly what I'm looking for. The divor spanelement needs to take the dimensions of the images, since there will be multiple sizes.
我正在寻找一种方法，当您在该图像上时，该方法允许div或span元素出现:hover在该图像上。我可以使用 来做到这一点.image:hover ~ .overlay，但这并不是我想要的。所述div或span元件需要所拍摄的图像的尺寸，因为会有多个尺寸。
Example
例子
<img width="200" height="200"/>would allow you to :hoverchanging the divor spanelement from display: noneto 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).
<img width="200" height="200"/>将允许您:hover将divorspan元素从to更改display: none为display: block（不一定需要是块）。从不可见变为可见的元素必须自动检测图像的大小并将元素的大小与这些相同的尺寸 (200x200) 匹配。但是，我也可以有一个<img width="300" height="400"/>需要元素匹配大小 (300x400) 的元素。
I'm also looking for a super easy way for these elements to be positioned perfectly over the images.
我也在寻找一种超级简单的方法，让这些元素完美地定位在图像上。
Here's my code pento show what I've got so far.
这是我的代码笔，用于显示到目前为止我所拥有的。
回答by Josh Crozier
Similarly to this answerI gave, you could absolutely position the .overlayelement relative to the parent element and give it a height and width of 100%this should work for all imgsizes given that the parent element will be inline-block(it's the same size as its containing elements).
与我给出的这个答案类似，您可以绝对地.overlay相对于父元素定位元素，并为其指定高度和宽度，100%这应该适用于所有img尺寸，因为父元素将是inline-block（它与其包含元素的尺寸相同）。
HTML Structure:
HTML 结构：
<div class="image">
<img src="..." />
<div class="overlay">The content to be displayed on :hover</div>
</div>
General CSS:
一般CSS：
Hide the .overlayelement by default, and use the selector .image:hover .overlayto change the styling on hover. Due to the HTML structure, this works well because .overlayis 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.
.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 */
}
}
