title: Change the image on hover
body: <p>I am trying to change the image on hover but it is changing the image of all the container which has the same class. Below is the code I'm trying.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
   $(".hover-image").hide();
   $(".tile-image").on({
    mouseenter: function(){
     $(".tile-image").hide();
     $(".hover-image").show();
     
     
      },
   mouseleave: function(){
     $(".tile-image").show();
     $(".hover-image").hide();
   }
   });
   
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
    height: auto;
    width: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="main-wrapper"&gt;
    &lt;div class="product"&gt;
      &lt;div class="product-tile"&gt;
        &lt;div class="image-container primary-images"&gt;
          &lt;a href="https://www.google.com"&gt;
            &lt;img class= "tile-image" src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg"&gt;
            &lt;img class= "tile-image hover-image" src="https://images.pexels.com/photos/34950/pexels-photo.jpg"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>.main-wrapper loops in the website</p>