怎樣實(shí)現(xiàn)鼠標(biāo)懸停效果贷腕？
最樸素的思路就是在圖片上添加一層圖標(biāo)樣式然后隱藏起來（opacity:0;）
然后把icon的hover樣式的透明度設(shè)置成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>
