为了在鼠标悬停在图像上时允许div或span元素出现在图像上,可以使用.image:hover overlay,
为了绝对地相对于父元素定位.overlay元素,我们将所有图像尺寸的高度和宽度设置为100%,从而使父元素内联块
<div class="image"> <img src="..." /> <div class="overlay">Content to be displayed on hover</div> </div>
By hiding the .overlay element by default, we 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. .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; } }