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 ="noun">Nouns</span> - <span id="verb">Verbs</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 {

}

.verb {
text-shadow: none;
display: inline;
}
#noun {
  
}

.noun {
text-shadow: none;
display: inline;
}

JavaScript

$(document).ready(function(){
    $("#verb").mouseenter(function(){
        $(".verb").css({"transition": "text-shadow 0.2s linear","text-shadow":"0 0 3px blue"});
    });
    $("#verb").mouseleave(function(){
        $(".verb").css("text-shadow", "");
    });
  
    $("#noun").mouseenter(function(){
        $(".noun").css({"transition": "text-shadow 0.2s linear","text-shadow":"0 0 3px red"});
    });
    $("#noun").mouseleave(function(){
        $(".noun").css("text-shadow", "");
    });
});