jQuery select next <div> element
<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>
