html5hover显示隐藏div,在HTML的：hover上的图像上显示<div>或<span>

为了在鼠标悬停在图像上时允许div或span元素出现在图像上，可以使用.image：hover overlay，

为了绝对地相对于父元素定位.overlay元素，我们将所有图像尺寸的高度和宽度设置为100％，从而使父元素内联块

的HTML

   

Content to be displayed on hover

的CSSBy 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;

}

}