当前位置:网站首页>【案例】元素的显示与隐藏的运用--元素遮罩
【案例】元素的显示与隐藏的运用--元素遮罩
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>
边栏推荐
- Abnova丨培养细胞总 RNA 纯化试剂盒中英文说明书
- Binary search
- 实现浏览页面时校验用户是否已经完成登录的功能
- Prior knowledge of machine learning in probability theory (Part 1)
- Implementation of redis unique ID generator
- Careercup its 1.8 serial shift includes problems
- Abnova e (diii) (WNV) recombinant protein Chinese and English instructions
- shell编程100例
- Norgen AAV extractant box instructions (including features)
- LeetCode: Distinct Subsequences [115]
猜你喜欢
Duchefa cytokinin dihydrozeatin (DHZ) instructions
Duchefa丨S0188盐酸大观霉素五水合物中英文说明书
Phpstudy Xiaopi's MySQL Click to start and quickly flash back. It has been solved
Chemical properties and application instructions of prosci Lag3 antibody
How to make ERP inventory accounts of chemical enterprises more accurate
PHP反序列化+MD5碰撞
Abnova丨荧光染料 620-M 链霉亲和素方案
教你自己训练的pytorch模型转caffe(二)
Duchefa丨P1001植物琼脂中英文说明书
Research and development efficiency improvement practice of large insurance groups with 10000 + code base and 3000 + R & D personnel
随机推荐
Duchefa丨D5124 MD5A 培养基中英文说明书
Duchefa low melting point agarose PPC Chinese and English instructions
Prosci LAG-3 recombinant protein specification
The Chinese Academy of Management Sciences gathered industry experts, and Fu Qiang won the title of "top ten youth" of think tank experts
AITM2-0002 12s或60s垂直燃烧试验
The development of research tourism practical education helps the development of cultural tourism industry
概率论机器学习的先验知识(上)
sql系列(基础)-第二章 限制和排序数据
MySQL InnoDB架构原理
基于flask写一个接口
Abbkine trakine F-actin Staining Kit (green fluorescence) scheme
Is Kai Niu 2980 useful? Is it safe to open an account
请查收.NET MAUI 的最新学习资源
ODPs next map / reduce preparation
LeetCode: Distinct Subsequences [115]
驱动壳美国测试UL 2043 符合要求有哪些?
How to make ERP inventory accounts of chemical enterprises more accurate
LeetCode: Distinct Subsequences [115]
基於flask寫一個接口
Specification of protein quantitative kit for abbkine BCA method