Question

我想要覆盖所有屏幕的<div id="translucent-mask">，除了<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>

<强> DEMO HERE

Answer 2

所以css方法对我的特定用例不起作用所以我不得不用vanilla 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>

半透明的暗遮罩/覆盖在所有屏幕上，除了<nav>聚焦在<nav>内的元素时？

2 个答案: