Html 突出显示div，并使页面上的其他内容更暗

我有这个部门：

.slicknav_nav {
    touch-action: pan-y;
    display: block;
    position: absolute;
    top: 102px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 1000;
    width: 20%;
    background: #fff;
    overflow-y: scroll;
}

我想要的是，当我点击使这个div出现的按钮时，我希望这个div高亮显示，其他div变暗。

---

同样，在youtube页面上，当你点击slick菜单时，它的高亮度和其他区域会变暗。

如果没有合适的颜色，很难判断，但这里有一个简化的解决方案：

让btn=document.getElementById（'hi-activate'）；
让tohighlight=document.getElementsByClassName（'highlight'）；
让allothers=document.getElementsByTagName（'div'）；
btn.addEventListener（'click'，function（）{
for（设i=0；i
div，按钮{
保证金：5px；
填充物：5px；
边框：1px纯黑；
}
一些内容
另一内容
高亮度内容
还有更多的内容
也可以高亮显示
最后呢
点击我如果您正在使用这种类型的html，那么您可以尝试下面的代码

<div class="slicknav_nav ">
    <div class="entry-content">
         <div class="expose">something</div>
         <div class="expose">something</div>
         <div class="expose">something</div>
    </div>
</div>

JS:

大家好，欢迎来到SO:）。你能给我们看看你的HTML和更多的CSS吗？你还试过别的吗？嗨，谢谢。是的，我确实尝试了jquery lightSwitcher，我在页面上的视频中使用了它，但我想知道这是否可以通过css实现，所以我不必有那么多jquery的东西。它基本上是光滑的菜单，当我点击它时，这个div将显示这样的css。嗨，请提供一些代码片段。可能您需要类似模态对话框的东西。使用纯javascript和css你可以看到这个例子。你想要一个“模态”吗？请查看此链接，了解如何创建一个：HI的可能副本，谢谢您的帮助。我试过了，但ti说未捕获的TypeError:btn.addEventListener不是一个函数，而且应该可以单击返回，因为我看到您的示例不会告诉我单击返回删除高位div。在您的示例中，您需要将
btn
更改为
btn[0]
选择器返回节点列表（一个类似数组的对象），即使它只包含一个项目。也是的，在我的示例中，没有单击后退，但我相信您可以想出一种方法来对其进行反向工程（实际上只是将
样式的值更改回原始值）
.slicknav_nav {
    background:rgba(0,0,0,0.3);
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:99998;
    pointer-events:none
}
.expose{
    background-color:red;
    position:relative;
}

$('.entry-content').hover(function() {
    $('.slicknav_nav').fadeIn(300);
}, function() {
    $('.slicknav_nav').fadeOut(300);
});

$('.expose').hover(function(e) {
    $(this).css('z-index', '99999');
},function(e) {
    $(this).css('z-index', '1');
});