JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="" class="link artist">Artist</a>
    </li>
    <li><a href="" class="link dog">Dog</a>
    </li>
</ul>
<a href="" class="photo1 artist"><img src="image1.jpg" alt=""></a>

<a href="" class="photo2 dog"><img src="image2.jpg" alt=""></a>

CSS

img {
    width:50px;
    height:50px;
    border:1px solid green
}
a {
    display:inline-block;
    min-width:50px;
    overflow:auto
}
img.active {
    border:5px solid blue
}

JavaScript

$("li a.link").hover(function () {

    $("a." + $(this).attr("class").replace("link ", "")+" img").addClass("active")

},

function () {
    $("a." + $(this).attr("class").replace("link ", "")+" img").removeClass("active")
})