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 😀

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();