怎样实现鼠标悬停效果？
最朴素的思路就是在图片上添加一层图标样式然后隐藏起来（opacity:0;）
然后把icon的hover样式的透明度设置成0.5
html代码：
css代码：
<style>
@font-face {
font-family: 'iconfont'; /* project id 307904 */
src: url('//at.alicdn.com/t/font_6zk386ul6ufvfgvi.eot');
src: url('//at.alicdn.com/t/font_6zk386ul6ufvfgvi.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_6zk386ul6ufvfgvi.woff') format('woff'),
url('//at.alicdn.com/t/font_6zk386ul6ufvfgvi.ttf') format('truetype'),
url('//at.alicdn.com/t/font_6zk386ul6ufvfgvi.svg#iconfont') format('svg');
}
a{
display:inline-block;
width: 200px;
height: 300px;
text-decoration:none;
position:relative;
}
img{
width: 200px;
height:300px;
}
.cover{
width: 200px;
height: 300px;
background:rgba(252,192,57,.6);
position:absolute;
top:0;
left:0;
opacity:0;
color:#fff;
transition:.6s;
}
.cover:hover{
opacity:.6;
}
.cover>span{
font-family: 'iconfont';
position:absolute;
left:38%;
font-size:50px;
line-height:300px;
}
</style>
html:
<a href="#">
<span class="cover">
<span></span>
</span>
</a>
