CSS综合案例——仿土豆网显示隐藏遮罩案例/鼠标经过显示遮罩

最新推荐文章于 2022-11-07 17:59:55 发布

我吃饭很慢.

最新推荐文章于 2022-11-07 17:59:55 发布

阅读量373

点赞数

分类专栏： CSS综合案例文章标签： css css3 html5

本文链接：https://blog.csdn.net/weixin_45586870/article/details/121390373

版权

本文介绍了一个CSS综合案例，通过鼠标经过元素触发显示半透明遮罩的效果，离开后遮罩消失。主要利用了元素的隐藏与显示、绝对定位等CSS技巧。

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

案例：鼠标经过时显示灰色遮罩，移走后恢复原样。
在这里插入图片描述
核心原理：原先的半透明黑色遮罩看不见，鼠标经过大盒子就显示出来。
注意：遮罩的盒子不占有位置，就需要用绝对定位和display配合使用。
涉及的相关知识：元素的隐藏与显示、元素的定位。

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注