1

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

overflow:auto;

在那个 div 里面，我有几个链接，上面附有悬停卡。当我将鼠标悬停在链接上并出现悬停卡时，它仅显示在父div 中可见的悬停卡部分。这当然是因为溢出：自动。

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

顺便说一句，我必须在父 div 中使用溢出：自动。这是无法改变的。

这是我正在使用的代码：

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

4

1 回答 1

0

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

于 2012-10-05T20:40:35.480 回答