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

最新推荐文章于 2023-09-17 18:45:59 发布

一只小白657

最新推荐文章于 2023-09-17 18:45:59 发布

阅读量366

点赞数 1

分类专栏：学习案例文章标签： 1024程序员节 css

本文链接：https://blog.csdn.net/weixin_45139556/article/details/120942047

版权

这篇博客介绍了一个CSS实战案例，通过鼠标经过某个元素时显示黑色半透明遮罩，旨在练习元素的显示隐藏及定位技巧。核心原理是利用绝对定位和display属性，使得遮罩在鼠标悬停时显现，而平时保持不可见状态。

摘要由CSDN通过智能技术生成

在这里插入图片描述

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

在这里插入图片描述

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

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

关注