fadeInさせる場所の指定方法

Question

ご覧いただきありがとうございます。
aタグにhoverした際に、カーソルを基準ではなく、aタグを基準として、aタグの真横にポップアップ(div)をfadeInさせたいのですが、場所の指定方法がわからず苦戦しています。
教えていただければ幸いです。

Answer 1

a タグを position: relative にして、ポップアップをa タグの子要素にして、ポップアップを position: absolute; left: 100% にするのはどうですか

a {
    position: relative;
}
a > div {
    position: absolute;
    left: 100%;
}

Comments

[kei344]

CSSがSASSかSCSSの記法になっています。（SCSSの場合マークダウンが対応しています）

[kimurayu]

cssに修正します

[退会済みユーザー]

ご回答ありがとうございます。
訳あってコードの詳細をこちらに記入することができないので、大変申し訳ないのですが、
例であげると2ch掲示板のレスアンカーの様な物を作ろうとしています。
aタグの子要素には上記の理由のためできないのです。
遅くなり申し訳ありません

Answer 2

$(function(){
  $('a.hoge').hover(
    function(){
      $(this).after($('<div>').css({display:"inline-block"}).text("fuga").hide().fadeIn());
    },function(){
      $(this).next('div').remove();
    });
});

<a href="#" class="hoge">hoge</a>

Answer 3

ホバーしたAタグの位置は position か offset で取得できます

$('aタグのセレクタ').hover(function() {
    // document左上からの相対位置
    var left = $(this).offset().left,
        top = $(this).offset().top
    // 親要素からの相対位置
    var left = $(this).position().left,
        top  = $(this).position().top

それを基準に何やら位置を計算して、
css で指定すれば良いです

$('div のセレクタ').css(
    left: left,
    top: top
}.fadeIn();

Comments

[退会済みユーザー]

ご回答ありがとうございます。
無事希望していた動作になりました。
aタグの位置を取得するなんて思いもしませんでした。
本当にありがとうございます。
もしよければもう一つ教えていただきたいのですが、
上記の位置をもう少し右であったり、左にしたい場合はどの様に記述すればよろしいでしょうか？

[kimurayu]

もう少し右にしたければ、数値でもいいなら
left: left + 10
左にしたければ、
left: left - 10
という風で調整できます。

[退会済みユーザー]

本当に感謝しています。
ありがとうございました。