无法与溢出

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