JSFiddle - React, Tailwind, and code Playground

by liquidmetalrob

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <span id="verb">Verbs</span> &nbsp; -  &nbsp; <span id ="noun">Nouns</span>
</p>

I 
<span class="verb">like</span> 
to 
<span class="verb">ride</span> 
my 
<span class="noun">bicycle</span> 
every 
<span class="noun">day</span>.

CSS

#verb {color: blue}
#noun {color: red}

.verb,.noun {
text-shadow: none;
display: inline;
transition: text-shadow 0.2s linear;
}

.verb-hovered {
  text-shadow: 0 0 3px blue;
}

.noun-hovered {
  text-shadow: 0 0 3px red;
}

JavaScript

$(document).ready(function(){
    $("#verb").mouseenter(function(){
        $(".verb").addClass("verb-hovered");
    });
    $("#verb").mouseleave(function(){
        $(".verb").removeClass("verb-hovered");
    });
  
    $("#noun").mouseenter(function(){
        $(".noun").addClass("noun-hovered");
    });
    $("#noun").mouseleave(function(){
        $(".noun").removeClass("noun-hovered");
    });
});