Question

我有一个奇怪的问题，在桌子顶部有一个absolut定位div。 div是toggeld从一个单元格内的超链接悬停，在这个单元格内所有其他超链接被div隐藏，在下一行但是超链接没有被覆盖？所有常规文本都是隐藏的，但不是超链接。 enter image description here

我真的很喜欢这个没有出现的代码示例=）

添加了EDIT代码

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

Answer 1

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

要解决此问题，请为您的悬停div添加一个正z-index。

注意：我一直主张不使用内联样式或脚本。它使调试变得困难，使代码变得丑陋，并增加了另一个多层的样式先例规则。

CSS：

td .box {
    z-index: 1;
}

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

请注意，你可以清理一下，但这就是你所看到的问题。

修改：以下是已清理的版本：http://jsfiddle.net/XXafA/

如何使div位于多个表行并覆盖其中的所有超链接？

1 个答案: