title: jQuery hover effect on image
body: <p>I am trying to get a simple hover effect with jQuery on an image.
  What I want to get eventually is a green hovering effect, with a text appearing along with the color. I don't know if I'm being clear.</p>
  
  <p>For now, I just want the simple color hover effect to work.</p>
  
  <p>Here is what I did first:</p>
  
  <pre><code>$("img").hover(
      function() {
          wid = $(this).width();
          hei = $(this).height();
          $("&lt;div id='hover'&gt;&lt;/div&gt;").insertBefore(this);
          $("#hover").css({
              "background-color": "rgba(60,147,138,0.2)",
              "width": wid,
              "height": hei,
              "z-index": "3",
              "position": "absolute"
          });
     },
     function() {
         $("#hover").remove();
     }
  );
  </code></pre>
  
  <p>That code there is generating an empty div on top of my image with a transparent green background, to get that green hover effect. But it doesn't work great, and my guess is that the mouse is not on the image anymore, but on that div that has appeared just above it.</p>
  
  <p>So I tried this then:</p>
  
  <pre><code>$("img").mouseenter(
      function() {
          wid = $(this).width();
          hei = $(this).height();
          $("&lt;div id='hover'&gt;&lt;/div&gt;").insertBefore(this);
          $("#hover").css({
              "background-color": "rgba(60,147,138,0.2)",
              "width": wid,
              "height": hei,
              "z-index": "3",
              "position": "absolute"
          });
      }
  );
  
  $("#hover").mouseleave(
      function() {
          $(this).remove();
      }
  );
  </code></pre>
  
  <p>The hover effect is stable as I expected, but the mouseleave event just doesn't work.
  I don't know what to do.</p>
  
  <p>Any help would be appreciated!</p>
  
  <p>Edit: Oh, and here is <a href="https://jsfiddle.net/Snowill/q5r3a00x/3/" rel="nofollow">the JSFiddle</a>, just in case</p>