实现遮罩效果

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

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

相关阅读

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

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

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

相关图片遮罩效果

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

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

相关 IVIEW实现遮罩

因为左边表格右边操作的原因在新增的时候表格时候需要将左边内容遮罩 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

超、凢脫俗/ 2023年10月05日 12:51/ 0 赞/ 5 阅读

相关遮罩层

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

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

相关前端遮罩效果

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

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

相关 jquery遮罩层效果

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

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

相关 CSS实现遮罩层

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

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

相关遮罩

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

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

相关实现遮罩效果

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

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

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

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

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