Question

我已经按照本教程操作了，它运行正常： http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

但是我的问题是我连续有3个div标签，都有溢出-y设置。当我将鼠标悬停在某些文本上以显示图像时，图像只能在div标签内看到溢出。它需要跨越div的宽度（不是高度）之外的整个尺寸。是否有任何方式可以在div标签之外显示图像。

由于 d

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

Answer 2

无法在此溢出区域外显示内容; html剪辑此外的所有数据。 w3schools.com/jsref/prop_style_overflow.asp

无法使用溢出显示div标签之外的内容

2 个答案: