JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="test" readonly="readonly" />

JavaScript

$(document).ready(function(){

    $('#test').mouseenter(function(){
        $(this).removeAttr('readonly');
        $(this).val('im hovered');
    });
    
    $('#test').mouseleave(function () {
        $(this).val('not hovered');
        $(this).attr('readonly', true);
    });
    
});