JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
            <a class="link1" href="">Link1</a>
            <a class="link2" href="">Link2</a>
            <a class="link3" href="">Link3</a> 
            <div class="fake"></div>
        </div>

CSS

.container {
    position:relative;
    width:200px;
    height:200px;
    background:red;
}
.fake {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:yellow;
}
.link1, .link2, .link3 {
    position:relative;
    z-index:1;
}
.link1:hover ~ .fake {
    background:#CCC;
}
.link2:hover ~ .fake {
    background:brown;
}
.link3:hover ~ .fake {
    background:orange;
}