css这么用a标签把一个div关闭

发布网友发布时间：2022-04-06 13:42

共1个回答

热心网友时间：2022-04-06 15:11

第一，如果你的a标签是在div里面的，那预计是不成的，因为css没有父选择器。

第二，如果你的a标签是和div同级的，那可以做到的，但是不能用a标签，因为a标签的伪类里面没有一个持久的状态，相比之下checkbox更好用，因为它有checked状态，可以用这个状态去标识弹出框是弹出还是关闭

代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>test</title>
    <style>
    body {
        background-color: gray;
    }

    .pop-up {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 200px;
        width: 200px;
        transform: translate(-50%, -50%);
        background-color: white;
    }

    .btn-close:checked ~ .pop-up {
        display: none;
    }
    </style>
    </head>

<body>
    <input id="checkbox" type="checkbox" class="btn-close" />
    <label for="checkbox">toggle按钮</label>
    <div class="pop-up">
        这个是弹出框
    </div>
    </body>

</html>