除屏幕外的所有屏幕上的半透明深色蒙版/覆盖层 <nav> 当专注于内部元素 <nav> ？

Question

我有一个<div id="translucent-mask">我想覆盖所有屏幕，但<nav>内的所有内容除外， 当且仅 <nav> 关注我的<nav>栏<li>元素之一（它们具有tabindex）时所以我可以专注于它们：

<nav>    
    <ul class="menu-list">
        <li onclick="location.href='#/work'" tabindex="1">Work</li>
        <li onclick="location.href='#/about'" tabindex="2">About
            <ul class="sub-menu">
                <li onclick="location.href='#/1'">Sub Menu 1</li>
                <li onclick="location.href='#/2'">Sub Menu 2</li>
                <li onclick="location.href='#/3'">Sub Menu 3</li>
                <li onclick="location.href='#/4'">Sub Menu 4</li>
                <li onclick="location.href='#/5'">Sub Menu 5</li>
            </ul>  
        </li>
           //more li elements...
</nav>

这就是div： <div id="translucent-mask"></div>

因此，我尝试将伪类重点放在菜单列表li元素上：

  nav ul li:focus #translucent-mask {
        background: black;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        opacity: 0.7;
    }

但它不适用样式，请提供帮助。

希望有一种方法可以在没有JavaScript的CSS + HTML中实现，但是如果您也知道JS中的解决方案，那么欢迎您。

Answer 1

你可以这样做：

的CSS

#translucent-mask {
    opacity: 0;
}

nav ul li:focus ~ #translucent-mask {
    background: black;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    opacity: 0.7;
}

的HTML

<nav>
    <ul class="menu-list">
        <li onclick="location.href='#/work'" tabindex="1">Work</li>
        <li onclick="location.href='#/about'" tabindex="2">About
            <ul class="sub-menu">
                <li onclick="location.href='#/1'">Sub Menu 1</li>
                <li onclick="location.href='#/2'">Sub Menu 2</li>
                <li onclick="location.href='#/3'">Sub Menu 3</li>
                <li onclick="location.href='#/4'">Sub Menu 4</li>
                <li onclick="location.href='#/5'">Sub Menu 5</li>
            </ul>
        </li>
        <div id="translucent-mask"></div>
     </ul>
</nav>

此处演示

Answer 2

因此，css方法不适用于我的特定用例，因此我不得不使用原始JavaScript：

function dimScreen(){
    document.getElementById('translucent-mask').style.display = "block";
}

这是css中的元素：

#translucent-mask {
    background: black;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    opacity: 0.7;
    display: none;
} 

现在，当我单击导航中的某些li元素时，我有了dimScreen（）函数，该函数可使屏幕变暗。

        <li onclick="location.href='#/about'; dimScreen()" tabindex="2">About

我的div在导航栏之外：

<div id="translucent-mask"></div>