Question

有人可以帮忙吗？我是jquery的新手，我坚持看似简单的事情。对不起，如果这是转贴，但我找不到我要找的东西。

我在页面上有2个链接，当您将鼠标悬停在其中一个链接上时，会在链接旁边显示相应的div。就像一个对话框弹出窗口。继承人我所拥有的，请让我知道我做错了什么..

js code：

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

jquery在链接标记旁边显示div

2 个答案: