我正在尝试在图像上显示一个弹出式 div onMouseHover。当前，弹窗显示在滚动条下方。我需要在 div 的滚动条上显示一个 float 弹出类型，而不是隐藏在滚动条下方。
提前致谢!
示例代码:
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>
最佳答案
尝试添加 position: absolute;到.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>
关于javascript - 在目标元素上显示弹出 div 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25370062/