jquery - 显示嵌套在具有自动溢出功能的 Div 中的所有 Div

Question

我正在使用 hovercard 插件 http://designwithpc.com/Plugins/Hovercard .在我的一个 div 中有

overflow:auto;

在那个 div 中，我有几个链接，上面附有悬浮卡片。当我将鼠标悬停在链接上时，悬停卡出现，它只显示父 div 内 可见的悬停卡部分。这当然是因为overflow:auto。

如何让悬停卡片出现在父 div 的外部上方，并且其可视区域不受父 div 的限制？

顺便说一句，我必须在父 div 中使用 overflow:auto。这是无法更改的。

这是我正在使用的代码:

HTML

<div class="demo-live">
    <strong>Hover over the red text to see the hovercard in action:</strong>
    <p>
        jQuery by
        <div class="hc-preview" style="z-index: 0; ">
            <label id="demo-basic" class="hc-name" style="z-index: 0; ">John Resig</label>
            <div class="hc-details" style="width: 400px; background-color: rgb(255, 255, 255); display: none; background-position: initial initial; background-repeat: initial initial; ">
                <img class="hc-pic" src="http://ejohn.org/files/short.sm.jpg">
                <p>John Resig is an application developer at Khan Academy. He was a JavaScript tool developer for the Mozilla Corporation. He is also thecreator and lead developer of the jQuery JavaScript library.</p>
                <p></p>
            </div>
        </div>
        is a cross-browser JS library designed to simplify the client-side scripting of                         HTML. It was released in January of 2006 at BarCamp NYC. Used by over 46% of the                            10,000 most visited websites, it's the most popular JavaScript library in use today.
    </p>
</div>​

JS

$(document).ready(function() {

    //plugin script for demo basic---
    var hoverHTMLDemoBasic = '<p>' + 'John Resig is an application developer at Khan Academy. He was a ' + 'JavaScript tool developer for the Mozilla Corporation. He is also the' + 'creator and lead developer of the jQuery JavaScript library.<p>';

    $("#demo-basic").hovercard({
        detailsHTML: hoverHTMLDemoBasic,
        width: 400,
        cardImgSrc: 'http://ejohn.org/files/short.sm.jpg'
    });

});

CSS

.demo-live{
max-width:300px;
overflow:auto;    
}​

演示:正在发生的事情:JsFiddle

Answer 1

一个选项是您可以在悬停时删除溢出并在悬停时将其重新添加，但我不知道这是否适合您的页面