JQuery Показать Div рядом с тегом ссылки

Question

Может кто-нибудь помочь, пожалуйста? Я новичок в jquery и застрял на чем-то, что кажется слишком простым. Извините, если это репост, но я не смог найти то, что искал.

У меня есть 2 ссылки на странице, и когда вы наводите указатель мыши на одну из ссылок, рядом со ссылкой отображается соответствующий элемент div. Как всплывающее окно диалога. Вот что у меня есть, пожалуйста, дайте мне знать, что я делаю неправильно ..

JS код:

function Show(id)

{

    var pos = $("a#88" + id).offset();     
    var eWidth = $("a#88" + id).outerWidth(); 
    var mWidth = $("div#99" + id).outerWidth(); 
    var left = (pos.left + eWidth - mWidth) + "px"; 
    var top = pos.top + "px";


   //alert(left + ' ' + top);


    $('div#99'+id).css("top", top);
    $('div#99'+id).css("left", left);
    $('div#99'+id).css("position", "fixed");


    $('a:Tip').hover(        
    function($e) { $('div#99'+id).slideDown(500); },        
    //function($e) {  },
    function($e) { $('div#99'+id).slideUp(500); }
);

}

HTML-код:

    <a href="#" id="88123456" class="Tip" onmouseover="Show(123456);">Some Title Text</a>
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
<a href="#" id="88456789" class="Tip" onmouseover="Show(456789);">Some Title Text2</a>  
<br />   
 <div id='99123456' title="hello" style="display:none;">
    something here;99123456

 </div>

 <div id='99456789' title="hello" style="display:none;">
    something here;99456789

 </div>

Спасибо

Answer 1

Может быть, это то, что вы ищете

<script type="text/javascript">
$().ready(function(){

    $('a.Tip').hover( function(){

     var link = $(this);
     var dialog = link.next('div');

    dialog.css("top", link.position().top);
    dialog.css("left", link.position().left + link.width());
    dialog.css("position", "fixed"); 

    dialog.slideDown(500);
    },

    function() { 
    $(this).next('div').slideUp(500);
    });

});

</script>

<a href="#"  class="Tip" >Some Title Text</a>
  <div  title="hello" style="display:none;">
    something here;99123456
 </div>
 <br />
<a href="#"  class="Tip" >Some Title Text2</a>  
 <div  title="hello" style="display:none;">
    something here;99456789
 </div>

Answer 2

Почему бы вам просто не использовать

$('a.Tip').hover(function() {
        $(this).next().slideToggle();
    });