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
당신이 몇 가지 실제 코드를 게시 할 수 – chadpeppers
아무 문제도 Chad는 나의 질문에 바이올린을 추가했다. 감사합니다 – w00tw00t111
오버플로 자동이 필요합니까? – Huangism