0

了解しました。.appendToを使用してoverflow：hiddenの問題を解決し、ツールチップ全体が含まれているdivの外側に表示されるようにしました。ただし、アイテムにカーソルを合わせると、ツールチップが所定の位置にロックされます。.appendToをクリアして、ツールチップを非表示にするにはどうすればよいですか。

$(this).hover(function(){
var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height:        this.offsetHeight});
$(this).children('.browse-tip').css({top: -40, left: pos.left - pos.width / 2});
$(this).children('.browse-tip').show();
$(this).children('.browse-tip').appendTo('#browse_wrap');
},function() {
$(this).children('.browse-tip').hide();
});
4

1 に答える 1

0

物事の全体的な構造はあなたの仕事をやりがいのあるものにしている。必要に応じてページを切り替えることができる独立した要素を用意し、表示する前に関連情報をその要素に入れることをお勧めします。

<div id="popup"></div>

<style>
#popup {
    position: absolute;
    display: none;
    z-index: 999999;
    width: 220px;
    height: 200px;
}

#popup .browse-tip {
    display: block;
}
</style>

<script>
$(this).hoverIntent(function(){
    var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight});
    $(this).children('.browse-tip').clone().appendTo("#popup");
    $("#popup").css({top: pos.top-40, left: pos.left - pos.width / 2});
    $("#popup").show();
    return true;
},function() {
    $("#popup").hide().children().remove();
    return false;
});
</script>

http://jsfiddle.net/pMSRp/

于 2011-08-18T16:56:25.033 に答える