JSFiddle - React, Tailwind, and code Playground

HTML

<a class="yo">hgh</a>
<a class="blur out" id="one"> hi </a>
<a class="blur out" id="two"> my </a>
<a class="blur out" id="three"> name </a>

CSS

a.blur
{
text-decoration: none;
color: #339;
}

a.blur:hover, a.blur:focus
{
text-decoration: underline;
color: #933;
}

.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus
{
text-decoration: none;
color: rgba(0,0,0,0);
outline: 0 none;
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}

.textshadow a.blur,
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus
{
text-shadow: 0 0 4px #339;
}

.textshadow a.blur.out,
.textshadow a.blur:hover, .textshadow a.blur:focus
{
text-shadow: 0 0 0 #339;
}

JavaScript

$(document).ready(function(){
$(".yo").mouseover(function(){

    $(this).siblings().addClass('blur');

}).mouseout(function(){

    $(this).siblings().removeClass('blur');

});});