鼠标悬浮出现播放按钮
时间：2024年03月03日
编辑：佚名
鼠标悬浮出现播放按钮效果图：
<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< style >
.contain{
display: block;
width: 500px;
height: 300px;
margin: 100px;
border: 1px solid #000;
position: relative;
}
.mask{
width: 500px;
height: 300px;
position: absolute;
left: 0;
top: 0;
background: rgba( 0, 0, 0, .4) url( sun.png) no-repeat center;
display: none;
}
a:hover .mask{
display: block;
}
< / style >
</ head >
< body >
< a class= "contain" >
< img src= "fa.jpg" alt= "" style= "width: 100%; height: 100%;" >
< div class= "mask" ></ div >
</ a >
</ body >
</ html >
<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< style >
.contain{
display: block;
width: 500px;
height: 300px;
margin: 100px;
border: 1px solid #000;
position: relative;
}
.mask{
width: 500px;
height: 300px;
position: absolute;
left: 0;
top: 0;
background: rgba( 0, 0, 0, .4) url( sun.png) no-repeat center;
display: none;
}
a:hover .mask{
display: block;
}
< / style >
</ head >
< body >
< a class= "contain" >
< img src= "fa.jpg" alt= "" style= "width: 100%; height: 100%;" >
< div class= "mask" ></ div >
</ a >
</ body >
</ html >
相关文章
猜你需要
