title: Same Class Name for div but hover only one at a time
body: <p>I have 5 <code>div</code> s with same class names called tile and I generate these <code>div</code>s dynamically. I am working on ASP.NET MVC project and based on the models I generate the tiles. </p>
  
  <p>I have added the hover method for these tiles from this example using jQuery <a href="https://stackoverflow.com/a/19480774">https://stackoverflow.com/a/19480774</a></p>
  
  <p>My requirement is that, only the hovered tile need to trigger the jQuery function so that particular tile's content change. As of now all the tiles content change when I hover any one tile div. 
  I guess it is because all the div have same class and I am adding hover event based on the class name. Is there a small tweak in jQuery like stop propagation or should I have use id's for each div like tile-1 for each div and in some way have selectors in jQuery to add hove event?</p>
  
  <p>As requested, My code is (Made changes according to answers)</p>
  
  <pre><code>$(document).ready(function () {
  
      var wapper;
      $(".tile").hover(function (e) { //mouse in
           // previously had wapper = (".tile-contents-wrapper");
          wapper = $(this).find(".tile-contents-wrapper");
              wapper.find("div:first-child").hide();
              wapper.find("div:last-child").show();
          },
          function (e) { //mouse out
              wapper.find("div:first-child").show();
              wapper.find("div:last-child").hide();
          });
  
  });
  </code></pre>
  
  <p>I guess it is not possible using CSS and its my mistake not to mention that I am looking for an answer using jQuery and not with CSS.</p>
  
  <p>Thanks for the answers.</p>