2012-10-05 4 views
1

호버 카드 플러그인 http://designwithpc.com/Plugins/Hovercard을 사용 중입니다. 내 div 중 하나에 있음오버플로가있는 Div에 중첩 된 모든 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;  
}​ 

데모 : 여기

내가 함께 일하고 코드입니다 w의 모자 벌어지고 : JsFiddle

+0

당신이 몇 가지 실제 코드를 게시 할 수 – chadpeppers

+0

아무 문제도 Chad는 나의 질문에 바이올린을 추가했다. 감사합니다 – w00tw00t111

+0

오버플로 자동이 필요합니까? – Huangism

답변

0

하나의 옵션은 호버에 오버 플로우를 제거하고 unhover에 다시 추가 할 수 있지만 그 페이지에 맞는 나도 몰라 여부를

관련 문제