javascript - jqueryで隠し要素を配置して表示する

Question

qtipに似たものを実装しようとしていますが、代わりにさまざまなものの機能を比較する表を使用しており、マウスオーバーで表示したい隠し要素を配置する際に問題が発生しています。どんな助けでも大歓迎です。http://jsfiddle.net/2HMjQ/

Answer 1

の代わりにevent.pageY、使用しようとしまし$(this).position().topたが、位置へのオフセットが 50 で、リンクのすぐ下にあります。下記参照、

content.on('mouseenter',function(){ //Used .on instead of bind
    var index=content.index(this);
    if(index<0){
        stop();
    }
    else{
        content.eq(index).css("font-weight","bold");
        display.stop(true,true);
        display.eq(index).css("top",+ $(this).position().top + 50); //Changed
        display.eq(index).fadeIn('slow');
    }
}).on('mouseleave',function(){ //Used .on instead of bind
    var index=content.index(this);
    display.hide();
    content.css("font-weight","normal");
});    

デモ: http://jsfiddle.net/2HMjQ/13/

Answer 2

ケースに単純な問題があるようです。event.PageY は event.pageY である必要があります。

私はこれを修正し、ここであなたのコードをいじっていくつかのマイナーなCSSの変更を加えました: http://jsfiddle.net/2HMjQ/11/

Answer 3

display.eq(index).css("top",+event.PageY);

する必要があります:

display.eq(index).css("top",+event.pageY);- 小文字の「p」に注意してください。