CSS课堂案例12-土豆网鼠标经过显示遮罩

案例

CSS课堂案例12-土豆网鼠标经过显示遮罩_第1张图片

鼠标经过时,显示一个黑色半透明的遮罩

CSS课堂案例12-土豆网鼠标经过显示遮罩_第2张图片

目的

  1. 练习元素的显示和隐藏
  2. 练习元素的定位

核心原理: 原先半透明的黑色遮罩看不见,鼠标经过大盒子,就显示出来
遮罩的盒子不占有位置,就需要用绝对定位和display配合使用

代码

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

你可能感兴趣的:(学习案例,1024程序员节,css)