1

我在桌子顶部有一个绝对定位的 div 有一个奇怪的问题。div 从单元格内的超链接悬停时切换，在此单元格内，所有其他超链接都被 div 隐藏，在下一行但是超链接没有被覆盖？所有常规文本都被隐藏，但超链接不被隐藏。在此处输入图像描述

我真的很喜欢一个没有发生这种情况的小代码示例=）

添加了编辑代码

<script src="jquery.js" type="text/javascript"></script>

<style>
    .box {
        display:none;
        position: absolute;
        top: 30px; 
        left: 10px;
        background: orange;
        padding: 5px;
        border: 1px solid black;
    }
</style>

<table id="sessionsTable" style="border-collapse: collapse; border: 1px solid black;">
    <tr>
        <td style="border: 1px solid black;">
            <div style="position: relative;">
                <a id="companyLink1" href="">Hoverlink</a><br>
                <a href="">link</a><br>
                <a href="">link</a>
                <div id="companyDiv1" style="height: 300px;" class="box" >
                    Stuff shown on hover
                </div>
                <script>
                    $('#companyLink1').mouseover(function() { $('#companyDiv1').show(); });
                    $('#companyLink1').mouseover(function() { $('#companyDiv1').show(); });
                    $('#companyLink1').mouseout(function() { $('#companyDiv1').hide(); });
                </script>
            </div>
        </td>
    </tr>
    <tr>
        <td style="border: 1px solid black;">
            <div style="position: relative;">
                <a id="companyLink2" href="">Hoverlink</a><br>
                <a href="">link</a><br>
                <a href="">link</a>
                <div id="companyDiv2" style="height: 300px;" class="box" >
                    Stuff shown on hover
                </div>
                <script>
                    $('#companyLink2').mouseover(function() { $('#companyDiv2').show(); });
                    $('#companyLink2').mouseover(function() { $('#companyDiv2').show(); });
                    $('#companyLink2').mouseout(function() { $('#companyDiv2').hide(); });
                </script>
            </div>
        </td>
    </tr>
</table>
4

1 回答 1

2

我要在这里捅一刀。表格中的链接通常不会这样做，但您将单元格内容包含在另一个div. 这些 div 按顺序绘制到屏幕上，并根据此顺序计算 z-index（以后没有其他 z-index/定位考虑的 div 绘制在前面的上面）。因此，表格中“稍后”（下方和右侧）的单元格将在您的 div 上方绘制 div。它只是看起来像链接，因为您的 div 没有背景颜色。

要解决此问题，请为悬停 div 设置正的 z-index。

注意：如果可能，我始终主张不要使用内联样式或脚本。它使调试变得困难，产生丑陋的代码，并增加了另一个毛茸茸的样式先例规则。

CSS：

td .box {
    z-index: 1;
}

这是一个快速修复示例：http: //jsfiddle.net/b9pCC/

请注意，您可以清理很多，但这就是您所看到的问题。

编辑：这是一个清理后的版本：http: //jsfiddle.net/XXafA/

于 2013-02-25T23:20:19.363 回答