1

テーブルの上に絶対配置された div に奇妙な問題があります。div は、セル内のハイパーリンクからのホバー時にトグルされます。このセル内では、他のすべてのハイパーリンクは div によって隠されていますが、次の行ではハイパーリンクはカバーされていませんか?? 通常のテキストはすべて非表示になりますが、ハイパーリンクは非表示になりません。ここに画像の説明を入力

これが発生していない小さなコード例が本当に大好きです =)

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>
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 に答える