無法與溢出

Question

我已經按照本教程顯示div標籤的內容之外，它工作正常： http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

但我的問題是，我有連續3 div標籤，所有溢出 - 一套。當我將鼠標懸停在某些文本上以顯示圖像時，圖像只能在帶有溢出的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剪輯以外的所有數據。 w3schools.com/jsref/prop_style_overflow.asp

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