Javascript 在目标元素上显示弹出div时出现问题_Javascript_Html_Css

Javascript 在目标元素上显示弹出div时出现问题

javascript html css

Javascript 在目标元素上显示弹出div时出现问题,javascript,html,css,Javascript,Html,Css,我试图在图像上显示一个弹出div onmousehave。当前，pop显示在滚动条下。我需要在div的滚动条上显示浮动弹出类型，而不是隐藏在滚动条下提前谢谢示例代码： CSS .popBox { margin: -50px 50px 0px 50px; z-index: 2; width: 60px; padding: 0.3em; border: 1px solid gray; } .images {

我试图在图像上显示一个弹出div onmousehave。当前，pop显示在滚动条下。我需要在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>

.popBox{
余量：-50px 50px 0px 50px；
z指数：2；
宽度：60px；
填充：0.3em；
边框：1px纯色灰色；
}
.图像{
宽度：50px；
高度：50px；
边界半径：5px；
}
分区卷轴{
背景色：#00FFFF；
宽度：80px；
高度：200px；
溢出：滚动；
}

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>


功能显示框（文本，obj）{
helpNode=document.createElement（'div'）；
helpNode.id='popBox'；
setAttribute（'class'，'popBox'）；
helpNode.innerHTML=文本；
obj.appendChild（帮助节点）；
}
函数hideBox（）{
node=document.getElementById（'popBox'）；
node.parentNode.removeChild（节点）；
}

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>

我在fiddle中尝试了您的代码，但它对我不起作用，因此肯定缺少一些内容，但要处理CSS问题，您需要在z-index'd元素中添加一个位置。因此，在您的情况下，将是这样的：

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

这样，弹出窗口将位于滚动条上方

此外，在我们进行此操作时，将

替换为

，或者简单地添加

。图像{display:block}

尝试添加位置：绝对；到。popBox

CSS

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

必须将节点附加到应用了

溢出：滚动的元素之外。本质上，overflow:scroll
会让你的弹出窗口需要滚动才能看到
您可能希望在元素周围添加另一个包装器div，并为其指定position:relative
，将弹出窗口附加到新的包装器div，然后使用position:absolute
（新包装器div上的position:relative
使绝对定位的子元素相对于该元素绝对定位。）尝试将position:absolute；添加到.popBox？或将其附加到滚动区域之外的元素。我尝试了一下，得到了相同的结果，但是，将其复制到HTML文件确实有效。
  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);
  }

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