JSFiddle - React, Tailwind, and code Playground

by ric47121

HTML

<h1>Highlight jQuery plugin</h1>  
<form method="post" action="" name="test1">  
  <table>  
    <tbody>  
      <tr>  
        <td> <label for="name">Name</label> </td>  
        <td> <input id="name" type="text" /> </td>  
      </tr>  
      <tr>  
        <td> <label for="country">Country</label> </td>  
        <td> <input id="country" type="text" /> </td>  
      </tr>  
      <tr>  
        <td> <label for="password">Password</label> </td>  
        <td> <input id="password" type="password" /> </td>  
      </tr>  
    </tbody>  
  </table>  
</form>  
<br />  
<small>Mueve el foco entre los campos del formulario</small>

JavaScript

$.fn.highlight = function(options){  

        var opts = $.extend({}, $.fn.highlight.defaults, options);  
   
        this.each(function(){              
            $(this).hover(
                function(){                  
                    $(this).css({"background" : opts.background});  
                },
                function(){ 
                    $(this).css({"background" : "white"});  
                }
            );    
        });  
      
    };  
       
    $.fn.highlight.defaults = {  
        // para el fondo un color por defecto  
        background: '#a6cdec'  
    };  

/*----------------------------*/

 $("form :input:visible").highlight({background: 'red'});