仿土豆鼠标悬浮出现播放按钮

最新推荐文章于 2021-12-10 22:35:53 发布

aaron9185

最新推荐文章于 2021-12-10 22:35:53 发布

阅读量912

点赞数

文章标签：鼠标悬停子绝父相

本文链接：https://blog.csdn.net/aaron9185/article/details/80915839

版权

记忆点：子绝父相

 
  <!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 
  > 
 

aaron9185

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
仿土豆鼠标悬浮出现播放按钮

记忆点：子绝父相&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫