title: jQuery select next <div> element
body: <p>I have a simple div layout html, there is a function that when mouse over the div with className "personal-icon-email", I will call a JS function and display the hidden div with className "img-info-mask". </p>
  
  <pre><code>&lt;div class="user-panel"&gt;
  &lt;div class="user-panel-avatar"&gt;&lt;img src="http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=80"/&gt;&lt;/div&gt;
  &lt;div class="user-panel-username"&gt;Frank&lt;/div&gt;
  &lt;div class="user-panel-info"&gt;Hi there, May name is Frank ....&lt;/div&gt; 
  &lt;div class="personal-icon-email pie-adj" onmouseover="showTips(this);" id="123321"&gt;&lt;/div&gt;
  &lt;div class="personal-icon-hi pihi-adj"&gt;&lt;/div&gt;
  &lt;div class="personal-icon-fav pifav-adj"&gt;&lt;/div&gt;
  &lt;div class="img-info-mask"&gt;Contact Frank Now&lt;/div&gt;
  </code></pre>
  
  <p> </p>
  
  <p>I was using jQuery with this and I have tried:</p>
  
  <pre><code>function showTips(object){$(object).next('.img-info-masks').show(); }
  </code></pre>
  
  <p>But failed. 
  Also i have tried </p>
  
  <p><code>function showTips(object){$('#123321').next('.img-info-masks').show();}</code></p>
  
  <p>Still not works.</p>
  
  <p>Can anyone tell me what's wrong and what i should do? Thank you a thousand :D</p>