Home/ Questions/Q 4324120
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T09:05:22+00:00

Can someone please take a look at the small test case below and tell

  • 0

Can someone please take a look at the small test case below and tell me why the div(.hide) is never visible in IE7 and IE6.

(N.B. I realise that jQuery’s hide() & show() methods could be used but I would prefer to use a CSS based solution that relies on classes rather than having jQuery writing inline styles to the DOM.)

<html>
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
            $(document).ready(function() {
                $(function() {
                    $("table tr").hover(function() {
                        $(this).addClass("hover");
                    }, function() {
                        $(this).removeClass("hover");
                    });
                });
            });
    </script>

    <style type="text/css">
        .hide {
            visibility: hidden;
            display: block;
            width: 16px;
            height: 16px;
            background-color: #f00;
        }
        .hover .hide {
            visibility: visible;
        }
    </style>

    <table style="border-collapse:collapse;">
        <tr>
            <th class="ident" scope="col">Col1</th>
            <th class="fname" scope="col">Col2</th>
            <th class="lname" scope="col">Col3</th>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td><div class="hide"></div></td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td><div class="hide"></div></td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td><div class="hide"></div></td>
        </tr>

        <tr>
            <td>Content</td>
            <td>Content</td>
            <td><div class="hide"></div></td>
        </tr>
    </table>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Not sure if this will fix your issue because I can’t actually replicate your problem (I only have IE7 via IE9 available to me), but try doing something like this instead:

    <html>
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
            $(document).ready(function() {
                $(function() {
                    $("table tr").hover(function() {
                       $(this).find('.redblock').toggleClass('show');
                    });
                });
            });
    </script>

    <style type="text/css">
        .redblock{
            visibility: hidden;
            display: block;
            width: 16px;
            height: 16px;
            background-color: #f00;
        }
        .show {
            visibility: visible !important;
        }
    </style>

    <table style="border-collapse:collapse;">
        <tr>
            <th class="ident" scope="col">Col1</th>
            <th class="fname" scope="col">Col2</th>
            <th class="lname" scope="col">Col3</th>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td><div class="redblock"></div></td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td><div class="redblock"></div></td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td><div class="redblock"></div></td>
        </tr>

        <tr>
            <td>Content</td>
            <td>Content</td>
            <td><div class="redblock"></div></td>
        </tr>
    </table>
</body>
</html>

    The proof is in the fiddle: http://jsfiddle.net/HEkqq/7/

    • 0