JSFiddle - React, Tailwind, and code Playground

HTML

<a class="test" href="#test">One</a>
<a class="test" href="#test">Two</a>
<a class="test" href="#test">Three</a>

<br/>
Click "One". Now click "three" and watch how "One" transitions back to red. It should just change to red immediately.

CSS

a {
    padding: 30px 50px;
    margin:5px;
    color: #FFF;
    background: red;         
    display:inline-block;
}
a:hover {
     background:green;
    -webkit-transition: all 1s linear;   
}
a.noTransition{
     -webkit-transition: none;  
    background: blue; 
}

JavaScript

$(".test").click(function(){
    $(this)
        .addClass("noTransition")
        .siblings()
        .removeClass("noTransition");
})