正常时:
鼠标覆盖:
要做这个效果,需要一张图片,一个span即可
<div class="mb15">
<div class="hy-txa">
<img src="xx.png"/>
<span>点击编辑头像</span>
</div>
</div>
下面是css:
<style class="mb15">
.hy-txa span {
visibility:hidden;
width:100%;
height:100%;
position:absolute;
color:white;
text-align:center;
line-height:120px;
left:0;
top:0;
background:#000;
opacity:.5;
}
.hy-txa:hover span { visibility:visible; }
</style>
重要的字段:
span的style中:
visibility = hideen
background = #000;
元素的不透明级别opacity = .5
然后将span强行覆盖图片
最后在span的hover中还原span的可见度即可.
visibility:visible