title: jQuery: display overlay over elements on hover using mouseenter and mouseleave
body: <p>To do this I wrote a script that works fine but only for slow motions of mouse, whenever it goes fast it becomes buggy, what can I improve in this script? Any recommandation?</p>
  
  <pre><code>$(document).ready(function() {
      $.random = function() {return Math.floor(Math.random()*Math.pow(10,17))}
  
      $.fn.addOverlay = function() {
          $("&lt;div class='overlay'&gt;&lt;/div&gt;")
                  .css({'position': 'absolute', 'background-color': '#9fc4e7', 'opacity': 0.3, 'top': $(this).offset().top, 'left': $(this).offset().left, 'width': $(this).width(), 'height': $(this).height()})
                  .attr('overlayId',overlayId)
                  .appendTo('body')
                  .mouseleave(function(){
                      $(this).remove();
                      $('.overlay').each(function(){
                          if($(this).attr('overlayId')==overlayId) {
                              $(this).remove()
                          }
                      })
                  });
          return this
      }
  
      $('div:not(.overlay),span,h1,h2,h3,h4,table,td,tr,p')
          .mouseenter(function(event){
              event.stopPropagation();
              overlayId = Math.random();
              $(this).addOverlay()
              .find('div,span,h1,h2,h3,h4,table,td,tr,p').each(function(){
                  $(this).addOverlay(overlayId)
              })
          })
  
  });
  </code></pre>