1

I have a strange problem with an absolut positioned div on top of a table. The div is toggeld on hover from a hyperlink within a cell, inside this cell all other hyperlinks are hidden by the div, on the next row however the hyperlinks are not coverd?? All regular text is hidden but not the hyperlinks.enter image description here

I would realy love a little code example where this is not occuring =)

EDIT code added

<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>
2
  • 1
    can you add your markup and css here as well? difficult to debug a diagram
    – Brad
    Feb 25, 2013 at 22:45
  • now i have stripped down the page and added a code example that illustrates the problem
    – Sultanen
    Feb 25, 2013 at 23:13

1 Answer 1

2

I am going to take a stab here. Links in a table would normally not do this, but you are enclosing the cell contents in another div. Those divs are drawn to the screen in order, and z-index is calculated based on this order (later divs with no other z-index/positioning considerations are drawn above earlier ones). So, cells "later" (lower and to the right) in the table will have divs that are drawn above your div. It only looks like the links because your divs have no background-color.

To fix this, give your hover divs a positive z-index.

Note: I always advocate for not using inline styles or script if possible. It makes debugging difficult, makes for ugly code, and adds another hairy layer of style precedent rules.

CSS:

td .box {
    z-index: 1;
}

Here is a quick fix example: http://jsfiddle.net/b9pCC/

Mind you, you can clean this up quite a bit, but that is the problem you are seeing.

Edit: Here is a cleaned up version: http://jsfiddle.net/XXafA/

1
  • Thank you verry much for fixing my problem and for cleaning up my design alot!
    – Sultanen
    Feb 26, 2013 at 0:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.