顯示嵌套在具有溢出的Div中的所有Div

我正在使用hovercard插件http://designwithpc.com/Plugins/Hovercard。在我的div的其中一個我有顯示嵌套在具有溢出的Div中的所有Div

overflow:auto;

在那裏div我有幾個鏈接與連接到他們的懸浮卡。當我將鼠標懸停在鏈接上並且出現懸停卡時，它只會顯示懸停卡的可見部分在父部分的之內。這當然是因爲溢出：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>

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

演示：w的帽子是怎麼回事：JsFiddle

來源

2012-10-05 w00tw00t111

你能發佈一些實際的代碼 – chadpeppers

沒問題乍得只是在我的問題上加了一個小提琴。謝謝 – w00tw00t111

你需要溢出汽車嗎？ – Huangism

一種選擇是，你可以刪除懸停溢出，並在後面加上它unhover，但我不知道是否適合您的網頁或不

來源

2012-10-05 20:40:35 Huangism

顯示嵌套在具有溢出的Div中的所有Div

回答

相關問題