jquery show div next to link tag
Can someone please help? I'm new to jquery and I'm stuck on something that seems too simple. Sorry if this is a repost but I couldn't find what I was looking for.
I have 2 links on a page and as you hover over one of the links, you show a corresponding div next to the link. Like a dialog popup. Heres what I have, please let me know what I'm doing wrong..
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 code:
<a href="#" id="88123456" class="Tip" onmouseover="Show(123456);">So开发者_StackOverflowme 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>
Thanks
May be this is what you are looking for
<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>
Why don't you just use
$('a.Tip').hover(function() {
$(this).next().slideToggle();
});
精彩评论