JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="list-a">
        <ul>
            <li>Div A</li>
        </ul>
    </div>
    <div>random elements</div>
    <div>random elements</div>
    <div>random elements</div>
    <div class="list-b">
        <ul>
            <li>Div B</li>
        </ul>
    </div>
</div>

CSS

.parent:hover .list-a, .parent:hover .list-b {
    box-shadow: 3px 3px 5px 6px #ccc;
}
.parent .list-a:hover {
    box-shadow: none;
    background:#aaa;
}
.parent .list-b:hover {
    box-shadow: none;
    background:#4c4;
}