내가이 튜토리얼을 따라 한

Question

오버 플로우와 div 태그의 내용 밖에 표시 할 수 없습니다 그리고 그것을 잘 작동합니다 : http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

내 문제는 내가 오버 플로우로, 행의 모든 ​​3 div 태그를 가지고있다 그러나 -y 설정. 내가 이미지를 표시하려면 텍스트 위에 마우스를 할 때, 이미지는 오버 플로우와 div 태그 내부를 볼 수 있습니다. 그것은 DIV의 폭 (되지 높이) 외부에 전체 크기에 걸쳐있을 필요가있다. 이미지가 div 태그 외부에 표시 될 수있는 방법이 있습니까?

덕분에 여기

확인 D는 코드 만 발췌입니다, 화장 시프트 코드 샘플입니다. 난 할 노력하고있어 가격이 가리킬 때, div 태그 외부에 내용을 표시합니다.

<table class="itemOverFlow" border="1px"> 
    <tr> 
     <td width="600px">other stuff here</td> 
     <td> 
      <div id="miniShoppingCart" class="itemOverFlow"> 
       <h4>White Chocolate & Peanut Butter</h4> 
       <br />1 X Box of 16 Squares at 14.95<br /> <a 
        href="shoppingItem.php?id=45 ">View Item</a><br /> <a 
        class="thumbnailLeft" href="#thumb">Pricing<span> 
         <div class="options"> 
          <h3>Purchase options</h3> 
          <form class="addToCartForm" method="post" action="addToCart.php"> 
           <input type="hidden" name="returningPage" 
            value="/ShoppingCart/categoryDisplay.php" /> 
           <table class="options"> 
            <tr> 
             <th>Selection</th> 
             <th>Price</th> 
             <th>Quantity</th> 
             <th></th> 
            </tr> 
            <input type="hidden" name="itemId" value="45" /> 
            <tr> 
             <td>Box of 16 Squares,</td> 
             <td>14.95</td> 
             </td> 
             <input type="hidden" name="0_id" value="0" /> 
             <input type="hidden" name="0_idObj" 
              value="676862cef66431c20584f6f4b9d7a743" /> 
             <td><select name="0_qty"><option value="1" selected>1</option> 
               <option value="2">2</option> 
               <option value="3">3</option> 
               <option value="4">4</option> 
               <option value="5">5</option> 
               <option value="6">6</option> 
               <option value="7">7</option> 
               <option value="8">8</option> 
               <option value="9">9</option> 
             </select> 
             </td> 
             <td><input type="submit" name="0_addToCart" 
              value="Change \ Add new"> 

             </td> 
            </tr> 
           </table> 
          </form> 

         </div> </span> </a> 
      </div> 
      <hr /></td> 
    </tr> 
</table> 

CSS는

<style type="text/css"> 
div.itemOverFlow { 
border: 1pt solid blue; 
height: 500px; 
overflow: auto; 
padding: 20px;} 
.thumbnailLeft { 
position: relative; 
z-index: 0;} 
a.thumbnailLeft { 
color: blue; 
text-decoration: underline;} 
.thumbnailLeft:hover { 
background-color: transparent; 
z-index: 50;} 
.thumbnailLeft span { 
position: absolute; 
background-color: lightyellow; 
padding: 5px; 
left: -1000px; 
border: 1px dashed gray; 
visibility: hidden; 
color: black; 
text-decoration: none;} 
.thumbnailLeft span img { 
border-width: 0; 
padding: 2px;} 
.thumbnailLeft:hover span { 
visibility: visible; 
top: 0; 
left: -400px; 
width: 450px; 
height: 350px;} 
</style> 

Answer 1

; html은이 밖의 모든 데이터를 클립합니다. 는

Answer 2

나는 이것이 당신의 오버 플로우 설정과는 아무 상관이 있다고 생각하지 않습니다.

그냥 당신이 this fiddle example처럼, 마우스를 텍스트에 비해 절대적으로 이미지를 배치합니다.

CSS :이 오버 플로우 영역 외부의 컨텐츠를 표시하는 방법은 없습니다

a { 
    position: relative; 
} 
a img { 
    display: none; 
} 
a:hover img { 
    position: absolute; 
    display: block; 
    z-index: 1; 
    left: 0; 
    top: 1.2em; 
}