JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            background-color: black;
            width: 800px;
            aspect-ratio: 1 / 1;
        }

        .container:not(:has(.child:hover)):hover {
            background-color: darkorange;
        }
        
        .child {
            position: absolute;
            background-color: red;
            width: 100px;
            height: 100px;
            transform: translate(-50px, 0px);
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="child"></div>
    </div>
</body>