jQuery select next <div> element

Question

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".

<div class="user-panel">
<div class="user-panel-avatar"><img src="http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=80"/></div>
<div class="user-panel-username">Frank</div>
<div class="user-panel-info">Hi there, May name is Frank ....</div> 
<div class="personal-icon-email pie-adj" onmouseover="showTips(this);" id="123321"></div>
<div class="personal-icon-hi pihi-adj"></div>
<div class="personal-icon-fav pifav-adj"></div>
<div class="img-info-mask">Contact Frank Now</div>

I was using jQuery with this and I have tried:

function showTips(object){$(object).next('.img-info-masks').show(); }

But failed. Also i have tried

function showTips(object){$('#123321').next('.img-info-masks').show();}

Still not works.

Can anyone tell me what's wrong and what i should do? Thank you a thousand :D

Answer 1

you can also use nextAll() instead of next() and than find your img-info-mask

want to show all the div.img-info-mask than try

$(object).nextAll('div.img-info-mask').show();

or want to first div with contains .img-info-mask

$(object).nextAll('div.img-info-mask:first').show();

Answer 2

next() only retrieves the immediate next sibling, it doesn't actually traverse all siblings.

http://api.jquery.com/next/

Get the immediately following sibling of each element in the set of 
matched elements. If a selector is provided, it retrieves the next 
sibling only if it matches that selector.

For one, if you wrap those divs in a parent div, you could do

$(this).parent().find('.img-info-mask').show()