实现遮罩效果

客官°小女子只卖身不卖艺 2022-05-25 02:46 244阅读 0赞

<!DOCTYPE html>

< html lang= "en">

< head>

< meta charset= "UTF-8">

< meta name= "viewport" content= "width=device-width, initial-scale=1.0">

< meta http-equiv= "X-UA-Compatible" content= "ie=edge">

< title>遮罩效果实现</ title>

< style>

\*\{

*margin*: 0;

*padding*: 0;

\}

.first\{

*width*: 200 px;

*height*: 200 px;

*border*: 2 px solid red;

\}

.second\{

*width*: 150 px;

*height*: 150 px;

*border*: 2 px solid green;

*position*: relative;

\}

.second div\{

*width*: 100 px;

*height*: 100 px;

*background*: yellow;

\}

.second p\{

*width*: 100 px;

*height*: 100 px;

*background-color*: rgba( 0, 0, 0, 0.6);

*position*: absolute;

*top*: 0;

*left*: 0;

*display*: none;

*color*: \#fff;

\}

</ style>

</ head>

< body>

< div class= "first">

< div class= "second">

< div>我是正常显示的内容</ div>

< p id= "obj">我是遮罩</ p>

</ div>

</ div>

< script>

*var* second =document. getElementsByClassName( "second")\[ 0\];

*var* obj =document. getElementById( "obj");

second. onmouseover = *function*()\{

obj.style.display = "block";

\}

second. onmouseout = *function*()\{

obj.style.display = "none";

\}

</ script>

</ body>

</ html>

发表评论取消回复

表情：

评论列表（有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 322 阅读

相关前端遮罩效果

var layer=$('<div id="layer" style="width:1999px ;height: 1999px;position: absolute;

你的名字/ 2023年01月08日 02:21/ 0 赞/ 203 阅读

相关 uniapp实现一个遮罩层

.mark{ position:absolute; height: 500rpx; color:

亦凉/ 2022年10月19日 12:43/ 0 赞/ 656 阅读

相关 jquery遮罩层效果

例如点击登录后弹出一个遮罩层“正在登录，请稍后....”，此时用户是不能操作的。代码如下：前提先引入 jquery-xxxx.min.js、jquery.blockUI.j

朴灿烈づ我的快乐病毒、/ 2022年08月09日 00:47/ 0 赞/ 279 阅读

相关给图片动态添加半透明遮罩效果

当鼠标hover到图片上时，出现半透明遮罩效果，移除hover则取消半透明遮罩效果 <!DOCTYPE html> <html lang="en">

淩亂°似流年/ 2022年06月01日 02:51/ 0 赞/ 207 阅读

相关 CSS实现遮罩层

<div id="main"> <button @click="open">open</button> <div cl

短命女/ 2022年05月26日 13:44/ 0 赞/ 327 阅读

相关遮罩

<div class =“modal-backdrop in”id =“loadingModal”style =“display：none; z-index：20000

系统管理员/ 2022年05月26日 00:19/ 0 赞/ 258 阅读

相关实现遮罩效果

<!DOCTYPE html> < html lang= "en"> < head> < meta charset= "UTF-8"> < meta name= "vi

客官°小女子只卖身不卖艺/ 2022年05月25日 02:46/ 0 赞/ 245 阅读

相关 React Native之Modal组件实现遮罩层效果

React-Native中Modal的使用 / React Native App dongtao 2017/04/22

水深无声/ 2022年04月24日 01:58/ 0 赞/ 574 阅读

相关实现局部遮罩与关闭

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 1 //实现局部遮罩 2 <script t

桃扇骨/ 2021年11月23日 06:50/ 0 赞/ 280 阅读