JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div class='spring'> </div>

CSS

.spring {
    background: red;
    width: 100px;
    height: 30px;
    transition: background 0.5s ease
}
.spring:hover, .spring.touched:hover {
    background: #ccc;
}
.spring.touched {
    background: #000;
}

JavaScript

$(document).ready(function () {

    $('.spring').on('mouseover', function () {
        $('.spring')
         .addClass('touched')
         .off('mouseover');
    });
   
});