1

ホバーカード プラグインhttp://designwithpc.com/Plugins/Hovercardを使用しています。私が持っている私のdivの1つで

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

4

1 に答える 1

0

1つのオプションは、ホバー時にオーバーフローを削除し、アンホバー時に追加することですが、それがあなたのページに適合するかどうかはわかりません

于 2012-10-05T20:40:35.480 に答える