无法显示溢出的div标签以外的内容

我按照这个教程，它工作正常：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>

---

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

就像在这个小提琴的例子中，相对于你悬停的文字，绝对地定位图像。

CSS：

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

---

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

链接地址: http://www.djcxy.com/p/83651.html

上一篇: Can't display content outside of div tag with an overflow

下一篇: Hide a DIV when the user clicks outside of it using jQuery