通过伪元素隐藏div内容[重复]

【问题标题】：Hide div content via pseudo element [duplicate]通过伪元素隐藏div内容[重复]
【发布时间】：2020-05-27 22:47:32
【问题描述】：

我正在尝试使用 css 和 js 创建一个简单的扫雷游戏。
我设法创建了网格，放置了炸弹，并计算了相邻单元格中的炸弹数量。

我有一些隐藏单元格内容的问题，直到玩家点击它们。

我最初的想法是使用伪元素，失败后我尝试在每个单元格顶部堆叠一个 div。
我失败了两次，所以我在这里:) 请尝试提供尽可能少的帮助。 我现在想要实现的是在每个单元格顶部创建一种蒙版。 稍后我会负责删除它。

谢谢！

在 Js 中有一条评论，我在其中创建了一个子 div 并在其上应用了 .mask。

在 css 中你可以找到 .mask 类

我想使用伪类来实现。

function start(n) {
    // place bombs
    if(n > 30) { n = 30; }
    var nodeList = document.getElementsByClassName("game-cell");
    gameCells = Array.from(nodeList);
    var totalCells = gameCells.length;
    while(n > 0 ) {
        var index = Math.floor(Math.random() * totalCells);
        gameCells[index].classList.add('bomb');
        gameCells.splice(index, 1)
        totalCells--;
        n--;
    }

    //place numbers
    var cellsAbove = [-11, -10, -9];
    var cellsBelow = [9, 10, 11];
    var cellsOnLeft = [-11, -1, 9];
    var cellsOnRight = [-9, 1, 11];
    gameCells = Array.from(nodeList);
    gameCells.forEach( (cell, idx, arr) => {
        if(!cell.classList.contains('bomb')) {
            var toIgnore = [];
            if (idx<10)     { toIgnore = toIgnore.concat(cellsAbove);  }
            if (idx>=90)    { toIgnore = toIgnore.concat(cellsBelow);  }
            if (idx%10===0) { toIgnore = toIgnore.concat(cellsOnLeft); }
            if (idx%10===9) { toIgnore = toIgnore.concat(cellsOnRight);}
            var adjacentCells = [-11, -10, -9, -1, 1, 9, 10, 11]
                .filter( c => toIgnore.indexOf(c) < 0)
                .map( c => c+idx)
                .map( c => arr[c]);
            var bombNumber = adjacentCells.map( c => c.classList.contains('bomb') ? 1 : 0).reduce( (a,b) => a+b, 0);
            if(bombNumber>0) gameCells[idx].innerText = bombNumber
        }
    });

    //mask cells 
    gameCells.forEach( n => {
        var mask = document.createElement("div");         
        mask.classList.add('mask')
        n.appendChild(mask); 
    })
}

start(10);
html, body {
    height: 100%;
    margin: 0;
}


.game-container {
    display: grid;
    grid-template-rows: 15% repeat(10, 1fr);
    grid-template-columns: repeat(10, 1fr);
    row-gap: 0px;
    column-gap: 0px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;

}

.game-header {
    text-align: center;
    grid-column: 1 /-1;
}

.game-cell {
    background-color: lightgray;
    box-shadow: inset 3px 3px 10px #000000;
    -moz-box-shadow: inset 3px 3px 10px #000000;
    -webkit-box-shadow: inset 3px 3px 10px #000000;
    height: 100%;
    width: 100%;
    border: 1px solid black;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-cell:hover {
    border-color: #4ca4a9;  
}
 
.bomb {
    background-color: lightpink;
}

.mask {
    /* background-color: gray; */
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 2;
}
    <div class="game-container">
        <header class="game-header"> My Game </header>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
    </div>

【问题讨论】：

  • 位置：相对；在 .game-cell 上？
  • 是的，这就够了。我总是忘记位置道具对第一个定位的祖先起作用
  • 但是我想用伪类来实现，可以吗？
  • 使用伪元素只需将掩码类移动到元素然后添加伪元素：jsfiddle.net/6xga3L0z
  • 添加了更多重复解释伪元素

标签： css


【解决方案1】：

如果您在.mask 类上使用position: absolute;，则需要一个position:relative; 位置参考，如果我正确理解您的问题，它应该应用于.game-cell 类。

function start(n) {
    // place bombs
    if(n > 30) { n = 30; }
    var nodeList = document.getElementsByClassName("game-cell");
    gameCells = Array.from(nodeList);
    var totalCells = gameCells.length;
    while(n > 0 ) {
        var index = Math.floor(Math.random() * totalCells);
        gameCells[index].classList.add('bomb');
        gameCells.splice(index, 1)
        totalCells--;
        n--;
    }

    //place numbers
    var cellsAbove = [-11, -10, -9];
    var cellsBelow = [9, 10, 11];
    var cellsOnLeft = [-11, -1, 9];
    var cellsOnRight = [-9, 1, 11];
    gameCells = Array.from(nodeList);
    gameCells.forEach( (cell, idx, arr) => {
        if(!cell.classList.contains('bomb')) {
            var toIgnore = [];
            if (idx<10)     { toIgnore = toIgnore.concat(cellsAbove);  }
            if (idx>=90)    { toIgnore = toIgnore.concat(cellsBelow);  }
            if (idx%10===0) { toIgnore = toIgnore.concat(cellsOnLeft); }
            if (idx%10===9) { toIgnore = toIgnore.concat(cellsOnRight);}
            var adjacentCells = [-11, -10, -9, -1, 1, 9, 10, 11]
                .filter( c => toIgnore.indexOf(c) < 0)
                .map( c => c+idx)
                .map( c => arr[c]);
            var bombNumber = adjacentCells.map( c => c.classList.contains('bomb') ? 1 : 0).reduce( (a,b) => a+b, 0);
            if(bombNumber>0) gameCells[idx].innerText = bombNumber
        }
    });

    //mask cells 
    gameCells.forEach( n => {
        var mask = document.createElement("div");         
        mask.classList.add('mask')
        n.appendChild(mask); 
    })
}

start(10);
html, body {
    height: 100%;
    margin: 0;
}


.game-container {
    display: grid;
    grid-template-rows: 15% repeat(10, 1fr);
    grid-template-columns: repeat(10, 1fr);
    row-gap: 0px;
    column-gap: 0px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;

}

.game-header {
    text-align: center;
    grid-column: 1 /-1;
}

.game-cell {
    background-color: lightgray;
    box-shadow: inset 3px 3px 10px #000000;
    -moz-box-shadow: inset 3px 3px 10px #000000;
    -webkit-box-shadow: inset 3px 3px 10px #000000;
    height: 100%;
    width: 100%;
    border: 1px solid black;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
}

.game-cell:hover {
    border-color: #4ca4a9;  
}
 
.bomb {
    background-color: lightpink;
}

.mask {
    /* background-color: gray; */
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 2;
}
<div class="game-container">
        <header class="game-header"> My Game </header>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
        <div class="game-cell"></div>
    </div>

P.S.：在您问题的 sn-p 代码中，您 没有 使用伪元素，所以也许您应该更改问题的标题...

【讨论】：

  • 感谢修复！有没有办法使用伪元素来做到这一点？
猜你喜欢
  • 1970-01-01
  • 2014-04-27
  • 2012-05-16
  • 1970-01-01
  • 2021-08-06
  • 2021-04-12
  • 1970-01-01
  • 2010-10-15
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode