html - 无法显示溢出的 div 标签之外的内容

Question

我已经按照本教程进行操作并且效果很好: http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

但是我的问题是我连续有 3 个 div 标签，所有标签都设置了 overflow-y。当我将鼠标悬停在某些文本上以显示图像时，图像只能在溢出的 div 标签内看到。它需要跨越 div 的宽度(不是高度)之外的完整尺寸。有什么方法可以让图像显示在 div 标签之外。

谢谢

好的，这是一个临时代码示例，它只是代码的摘录。我想做的是当价格悬停时，显示 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

我认为这与您的溢出设置没有任何关系。

只需绝对定位图像，相对于悬停的文本，如 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;
}