如何给div添加遮罩层 如下图

<style>

    .mark{

        position:fixed

        left:0

        top:0

        opacity:.5

        width:100%

        height:100%

        background:#000

        z-index:998

    }

    .content{

        position:absolute

        z-index:999

    }

</style>

<!--↓遮罩-->

<div class="mark">

    <div class="content">红框div</div>

</div>

给你一个大体的思路，这个div使用relative定位，然后在他的里面添加一个div使用absolute定位，然后设置里面的div高度，宽度，透明度，然后就是使用js控制了，当达到你的要求时，将里面的div的display设置block，否则就是none，当然了，最开始就是隐藏的，大体就是这个样子

ps：可能图片颜色有点...umm特别可能看不出来

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

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

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

刚玩前端呢，想试写game/anime/manga的网站，先把Android放下（分手吧！）。

---