当元素未被悬停时清除 .appendTo

发布于 2024-11-30 01:37:39 字数 510 浏览 0 评论 0原文

好吧，所以我使用 .appendTo 来解决溢出问题：隐藏，这样我的整个工具提示就会显示在包含的 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();
});

原文

Alright so I used .appendTo to beat an issue of overflow:hidden so my entire tooltip would show outside the containing div. However, it locks the tooltip in place after the item was hovered over. How do I go about clearing the .appendTo to hide the tooltip.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一影成城 2024-12-07 01:37:39

事情的整个结构使你的工作充满挑战。我建议使用一个独立的元素，您可以在需要时在页面周围浮动切换，并在显示之前将相关信息放入其中：

<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/

The whole structure of the thing is making your work challenging. I recommend having an independent element that you can float around the page toggling when needed, and just putting the relevant info into it before showing:

<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/

回复收藏 0 原文

~没有更多了~