[Vue Js]如何实现一个带遮罩的全屏div

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[Vue Js]如何实现一个带遮罩的全屏div相关的知识,希望对你有一定的参考价值。

参考技术A ps:可能图片颜色有点...umm特别可能看不出来

三个内容的宽度为100%,这样屏幕就会均分三部分。然后将遮罩宽度也设为100%均分,为了让其“盖”在内容上面,需要将遮罩的父div设置成absolute,当然其宽度和高度要和内容一样,最后再设置鼠标的事件监听就好了。

如果你按照我上面所说的思路实现,你会发现:

ps: 遮罩的父布局也要同时隐藏,因为对内容用的是mouseenter,对显示出来的遮罩用mouseleave。如果不把遮罩的父布局隐藏,会无法触发内容的mouseenter(被遮罩父布局挡住了)。这种做法好像很奇怪,有更好的可留言。

刚玩前端呢,想试写game/anime/manga的网站,先把android放下(分手吧!)。

以上是关于[Vue Js]如何实现一个带遮罩的全屏div的主要内容,如果未能解决你的问题,请参考以下文章

创建带遮罩的文本框,但在空白时隐藏带遮罩的字符

easyui dialog 能不能在弹出窗口的时候不显示遮罩,且屏蔽其他地方的点击

Axure RP使用攻略--带遮罩层的弹出框

js带有遮罩的弹窗

详解css3如何给背景图片加颜色遮罩

带有 React JS Div 和组件的全屏背景图像