实现遮罩效果

客官°小女子只卖身不卖艺 2022-05-25 02:46 204阅读 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 条评论，204人围观）

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

相关阅读

相关原生JS实现具有遮罩效果的登录窗口

1、点击文本，可以弹出登录窗口，提供页面遮罩层；2、按住鼠标按键，可以自由拖拽窗口的位置； 3、点击关闭按钮，可以关闭登录窗口；<!DOCTYPE html&...

﹏ヽ暗。殇╰゛Y/ 2024年04月28日 13:10/ 0 赞/ 24 阅读

相关图片遮罩效果

欢迎访问我的博客地址 : [博客地址][Link 1] **鼠标移入容器半遮罩层从下方逐渐移上去** 话不多说，直接上代码! <!DOCTYPE html...

小咪咪/ 2024年04月18日 16:53/ 0 赞/ 30 阅读

相关 165：vue+openlayers 利用turf实现遮罩挖洞效果

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第165个 [点击查看专栏目录][Link 1]

「爱情、让人受尽委屈。」/ 2024年04月01日 14:50/ 0 赞/ 14 阅读

相关遮罩层

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

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

相关前端遮罩效果

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

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

相关 jquery遮罩层效果

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

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

相关 CSS实现遮罩层

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

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

相关遮罩

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

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

相关实现遮罩效果

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

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

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

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

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