JSFiddle - React, Tailwind, and code Playground

HTML

<ul style="position: absolute; z-index: 999999999;">
    <li><a href="#" id="home_link">Home</a></li>
    <li><a href="#" id="hits_link">music</a><a class="adjacent">Hey I am a adjacent sibling</a></li>
    <li><a href="#" id="cinema_link">cinema</a></li>
    <li><a href="#" id="shows_link">shows</a></li>
    <li><a href="#" id="timeout_link">timeout</a></li>
    <li><a href="#" id="win_link">win</a></li>
</ul>
<div id="logo"></div>

CSS

ul li a#hits_link:hover { color: #f00; }
ul li a#hits_link:hover + a.adjacent { border: 1px #000 solid; } 

#logo { background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png"); background-repeat: no-repeat; width: 500px; height: 200px; display: block; margin-left: 200px; }

JavaScript

$("#hits_link").hover(function() {
    $("#logo").css("background-position", "-198px 0px");
},function() { 
    $("#logo").css("background-position", "0px 0px");
});