Question

我正在尝试在图像上显示一个弹出式div onMouseHover。目前，弹出窗口显示在滚动条下方。我需要在div的滚动条上显示一个浮动弹出窗口类型，而不是隐藏在滚动条下面。

提前致谢！

示例代码：

CSS

.popBox {
        margin: -50px 50px 0px 50px;
        z-index: 2;
        width: 60px;
        padding: 0.3em;
        border: 1px solid gray;
    }
.images {
        width: 50px;
        height: 50px;
        border-radius: 5px;
    }
div.scroll {
    background-color: #00FFFF;
    width:80px;
    height: 200px;
    overflow: scroll;
}
</style>

的JavaScript

<script>
  function showBox(text, obj) {
        helpNode = document.createElement('div');
        helpNode.id = 'popBox';
        helpNode.setAttribute('class','popBox');
        helpNode.innerHTML = text;
        obj.appendChild(helpNode);
  }

  function hideBox() {
        node = document.getElementById('popBox');
        node.parentNode.removeChild(node);
  }
</script>

HTML

<body>

<div class="scroll" style="margin:0px auto">
 <b onMouseOver="showBox('<b>Foo1</b><br /> Bar1', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-511058.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo2</b><br /> Bar2', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-380016.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo3</b><br /> Bar3', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-293063.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo4</b><br /> Bar4', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-611834.jpg" /></b></br>

</div>

</body>
</html>

Answer 1

尝试添加位置：绝对;到.popBox

CSS

.popBox {
    margin: -50px 50px 0px 50px;
    z-index: 2;
    width: 60px;
    padding: 0.3em;
    border: 1px solid gray;
    position: absolute;
    }
.images {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    }
div.scroll {
    background-color: #00FFFF;
    width:80px;
    height: 200px;
    overflow: scroll;
    }

的JavaScript

  function showBox(text, obj) {
        helpNode = document.createElement('div');
        helpNode.id = 'popBox';
        helpNode.setAttribute('class','popBox');
        helpNode.innerHTML = text;
        obj.appendChild(helpNode);
  }

  function hideBox() {
        node = document.getElementById('popBox');
        node.parentNode.removeChild(node);
  }

HTML

<div class="scroll" style="margin:0px auto">
    <b onMouseOver="showBox('<b>Foo1</b><br /> Bar1', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-511058.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo2</b><br /> Bar2', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-380016.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo3</b><br /> Bar3', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-293063.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo4</b><br /> Bar4', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-611834.jpg" /></b></br>
</div>

DEMO

Answer 2

我在小提琴中尝试了你的代码并且它对我不起作用，所以必须缺少某些东西，但是要处理你的CSS问题，你需要在z-index＆lt; d; d元素中添加一个位置。所以，在你的情况下会是这样的：

div.scroll {
background-color: #00FFFF;
width:180px;
height: 200px;
overflow: scroll;
position:relative;
z-index:-1
}

这样，弹出窗口就会在滚动条上。

此外，正如我们所做的那样，将</br>替换为<br/>，或者只需添加.images{display:block}

Answer 3

您必须将节点附加到已应用overflow: scroll的元素之外。按照它的性质，overflow: scroll将使您的弹出窗口需要滚动才能看到。

你可能想要在元素周围添加另一个包装div，并给它position: relative，将弹出窗口附加到新的包装div，并用position: absolute（position: relative定位它们。在新的包装器div上，绝对定位的子项绝对相对于该元素。）

在目标元素上显示弹出div的问题

3 个答案: