当前位置:网站首页>【案例】元素的显示与隐藏的运用--元素遮罩
【案例】元素的显示与隐藏的运用--元素遮罩
2022-07-05 20:56:00 【发呆少女】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遮罩</title>
<style> * {
margin: 0; padding: 0; } a {
text-decoration: none; } .news {
position: relative; width: 300px; height: 200px; margin: 20px auto; background-color: pink; } .news img {
width: 100%; height: 100%; } .news .cover {
display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .news .cover a {
position: absolute; width: 50px; height: 50px; top: 50%; margin-top: -25px; left: 50%; margin-left: -25px; } .news .cover a img {
width: 100%; height: 100%; } /* 鼠标经过是,让遮罩显示出来 */ /* 注意写法 */ .news:hover .cover {
display: block; } </style>
</head>
<body>
<div class="news">
<img src="./news.jpeg" alt="">
<!-- 鼠标经过时,出现遮罩 -->
<div class="cover">
<a href="#"><img src="./play.jpeg" alt=""></a>
</div>
</div>
</body>
</html>
边栏推荐
- Mode - "Richter replacement principle"
- 基於flask寫一個接口
- Abnova丨 CD81单克隆抗体相关参数和应用
- 判断横竖屏的最佳实现
- CareerCup它1.8 串移包括问题
- Who the final say whether the product is good or not? Sonar puts forward performance indicators for analysis to help you easily judge product performance and performance
- Duchefa p1001 plant agar Chinese and English instructions
- 教你自己训练的pytorch模型转caffe(二)
- NPDP如何续证?操作指南来了!
- Is it necessary for bazel to learn
猜你喜欢
Duchefa丨S0188盐酸大观霉素五水合物中英文说明书
王老吉药业“关爱烈日下最可爱的人”公益活动在南京启动
phpstudy小皮的mysql点击启动后迅速闪退,已解决
Analyze the knowledge transfer and sharing spirit of maker Education
请查收.NET MAUI 的最新学习资源
Abnova丨DNA 标记高质量控制测试方案
Make Jar, Not War
如何让化工企业的ERP库存账目更准确
Abnova fluorescent dye 620-m streptavidin scheme
Which is the best online collaboration product? Microsoft loop, notion, flowus
随机推荐
How to renew NPDP? Here comes the operation guide!
Prior knowledge of machine learning in probability theory (Part 1)
Graph embedding learning notes
如何让化工企业的ERP库存账目更准确
2.<tag-哈希表, 字符串>补充: 剑指 Offer 50. 第一个只出现一次的字符 dbc
Monorepo管理方法论和依赖安全
AITM 2-0003 水平燃烧试验
Web Service简单入门示例
Typhoon is coming! How to prevent typhoons on construction sites!
matplotlib绘图润色(如何形成高质量的图,例如设如何置字体等)
显示器要申请BS 476-7 怎么送样?跟显示屏一样吗??
POJ 3414 pots (bfs+ clues)
ts 之 泛型
研學旅遊實踐教育的開展助力文旅產業發展
ProSci LAG-3 重组蛋白说明书
bazel是否有学习的必要
Abnova丨DNA 标记高质量控制测试方案
ClickHouse 复制粘贴多行sql语句报错
MySQL ifnull usage function
Analyze the knowledge transfer and sharing spirit of maker Education