鼠标划过div实现影印遮罩

要实现的效果：

具体代码

<style>
    .cms-admin {
        position: relative;
    }

    .cms-admin::after {
        display: none;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
    }

    .cms-admin:hover::after {
        display: block;
    }
</style>
<div class="cms-admin">
    <ul>
        <li>111111111111</li>
        <li>111111111111</li>
        <li>111111111111</li>
        <li>111111111111</li>
    </ul>
</div>