CSS悬停框位置问题答案

【问题标题】：CSS hover box position issueCSS悬停框位置问题
【发布时间】：2012-01-17 04:19:04
【问题描述】：

目前我正在使用以下 CSS 来显示悬停框：

.box {
    width: 500px;
    padding: 3px;
    background: #404040;
    color: #fff;
    font: normal 12px Arial, Sans-serif;
    position: absolute;
}

javascript函数：

function showBox(i,j){
                if(i==1){
                    document.getElementById("box"+j).style.display='block';
                } else if(i==2) {
                    document.getElementById("box"+j).style.display='none';
                }
            }

html代码：

<div style="height:175px;overflow:auto;">
            <table>
                <tr>
                    <td>
                        <table>
                            <tr>
                                <td>
                                    <p onmouseover="showBox(1,1);" onmouseout="showBox(2,1);" id="hover1">Hover Me 1</p>
                                    <div id="box1" class="box">I'm hover box 1.</div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table>
                            <tr>
                                <td>
                                    <p onmouseover="showBox(1,2);" onmouseout="showBox(2,2);" id="hover2">Hover Me 2</p>
                                    <div id="box2" class="box">I'm hover box 2.</div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table>
                            <tr>
                                <td>
                                    <p onmouseover="showBox(1,3);" onmouseout="showBox(2,3);" id="hover3">Hover Me 3</p>
                                    <div id="box3" class="box">I'm hover box 3.</div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table>
                            <tr>
                                <td>
                                    <p onmouseover="showBox(1,4);" onmouseout="showBox(2,4);" id="hover4">Hover Me 4 </p>
                                    <div id="box4" class="box">I'm hover box 4.</div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table>
                            <tr>
                                <td>
                                    <p onmouseover="showBox(1,5);" onmouseout="showBox(2,5);" id="hover5">Hover Me 5</p>
                                    <div id="box5" class="box">I'm hover box 5.</div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table>
                            <tr>
                                <td>
                                    <p onmouseover="showBox(1,6);" onmouseout="showBox(2,6);" id="hover6">Hover Me 6</p>
                                    <div id="box6" class="box">I'm hover box 6.</div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table>
                            <tr>
                                <td>
                                    <p onmouseover="showBox(1,7);" onmouseout="showBox(2,7);" id="hover7">Hover Me 7</p>
                                    <div id="box7" class="box">I'm hover box 7.</div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>

如果您运行此程序，您会发现当您将鼠标悬停在任何“Hover ME X”文本上时会出现一个悬停框。这可以正常工作，直到您没有在 div 中向下滚动。当您在 div 中向下滚动时，悬停框显示在错误的位置。我该如何克服这个问题？

【问题讨论】：

第一步：使用 div 进行布局。第二步：当你修好第一步后回来。
他对桌子很舒服，所以他用它有什么问题吗？
另外，你的代码不完整，也没有完全说明问题，反正我也无法重现。

标签： javascript css hover

【解决方案1】：

如果你使用

position: absolute;

并且您使用负边距和正边距，您将能够将 div 放置在您想要的任何位置（无需使用除 position: absolute 以外的任何东西），边距将仅相对于 div 放置在代码。编码的另一个错误是 div 显示（至少在我的浏览器 {chrome} 中）甚至在您将鼠标悬停在激活它的文本上方之前。为了确保所有（或大多数）浏览器中的正确功能，一个非常快速的解决方法是将以下样式添加到 CSS 样式“框”：

display: none;

这将默认隐藏 DIV，进而阻止它在页面加载时显示。然后，当您将鼠标悬停在文本上方时，JavaScript 中的“显示：块”将覆盖它，因此不会有任何问题。

我的“盒子”css样式的最终结果是：

padding: 3px; margin-left:-10px; margin-top:15px; color: #fff; font: normal 12px Arial, Sans-serif; position:absolute; display:none; padding: 10px 7px 10px 7px; border:#333333 1px solid; border-radius:3px; width:224px;

【讨论】：

【解决方案2】：

问题是你绝对定位盒子：

position: absolute;

尝试相对定位或固定定位。

position:fixed;

【讨论】：

更改为固定具有相同的效果和相关的作品，但我使用这个悬停框的地方高度很大，我不希望它在悬停时占用空间。
您可能需要获取鼠标悬停的元素的位置并相对于它移动某处。或者，如果您很懒，请使用 DOM Window：swip.codylindley.com/DOMWindowDemo.html 查看示例 7，我认为这就是您要查找的内容...

【解决方案3】：

这里的问题是，在你滚动页面之前，div 将被定位在正确的位置，向下滚动时你必须记住你的页面已经从默认屏幕尺寸扩展，所以在定位 div 时你必须考虑事实 向上滚动 和 向左滚动，那么只有您的 div 定位正确。尝试在 css 中定义表达式或手动编写自己的函数来定位 div。希望对您有所帮助。

【讨论】：