使用css实现遮罩层 jquery实现点击任意位置关闭遮罩

慕世妮

已于 2022-06-29 17:48:00 修改

阅读量1.1k

点赞数

分类专栏： html 文章标签：前端 html

于 2022-06-29 17:38:35 首次发布

本文链接：https://blog.youkuaiyun.com/yangruini_love/article/details/125525928

版权

html 专栏收录该内容

16 篇文章

订阅专栏

这篇博客介绍了如何使用CSS创建一个遮罩层，并通过jQuery实现两种关闭方式：点击关闭按钮和点击任意位置关闭。遮罩层初始透明度为0.3，鼠标悬停时变为1。实现过程中需确保引入了jQuery库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完整的html和css可以根据实际情况进行更改。

使用了一个鼠标悬停效果，默认颜色透明度为0.3，当鼠标移上去后，透明度为1。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<style>
 
.close {
  opacity: 0.3;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  float: right;
  position: relative;
  right: 20px;
  top: 5px;
  content: ' ';
  height: 20px;
  width: 1px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}
 
.container {
  width: 500px;
  height: 200px;
  margin:30px 20px;
  background-color: #f1f1f1;
}
 
</style>

</head>
<body translate="no" >

 //主要部分，可根据实际情况放置，一般放到顶端就可以
<div id="cover">
  <a href="#" class="close">
</div>
 
</body>
</html>

接下来介绍的是用jquery实现俩种方式的关闭遮罩

注意：首先你有引入jquery的文件哦~要不然代码会报错，如果使用的是js的话可以自行转换一下语言使用，逻辑就非常非常的简单~

方法一：点击×关闭遮罩

$('.close').click(function(){
   cover.style.display="none";   //隐藏遮罩层
})

方法二：点击任意位置关闭遮罩

$('#cover').click(function(){
   cover.style.display="none";   //隐藏遮罩层
})