JSFiddle - React, Tailwind, and code Playground

by Inderpreet Singh Jolly

HTML

<input  type="text" disabled="disabled" />

<div class="events"></div>

CSS

.disOverlay {
position: absolute;
top: 9px;
left: 10px;
height: 22px;
width: 172px;
z-index: 9;
background-color: violet;
opacity: 0.4;
}

JavaScript

$(document).on({ 
        mouseenter: 
           function()
           { 
                $(".events").html("MouseEnter");
		   }, 
        mouseleave: 
           function() 
           { 
     			$(".events").html("MouseOut");
           } 
       },".disOverlay"
 );





function disabledInput(){
$(".disOverlay").remove();	
$("input[type=text]").each(function(){
	if($(this).is(":disabled")){								
	$(this).before( "<div class='disOverlay'></div>");				
	}else{
		$(this).prev(".disOverlay").remove();
	}
});
}	


disabledInput(); // Run this function on page load