jQuery Hover, display and visibility CSS not properly applied in IE7 and below

Question

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>

This works for me in IE7-9, Chrome: jsfiddle.net/HEkqq (I didn't change anything) — Adam Terlson
– Adam Terlson, Commented Apr 13, 2011 at 14:45
I would suggest using firebug lite to find out what's going on youtube.com/watch?v=vLJ2RaNZ22E — Calum
– Calum, Commented Apr 13, 2011 at 14:53
I know what's going on in firefox, it's working. IE7&6 are the problem. — Red Taz
– Red Taz, Commented Apr 13, 2011 at 15:27

x10 · Accepted Answer · 2011-04-13 14:52:58Z

1

You have the CSS wrong:

 .hover .hide {
    visibility: visible;
  }

should be:

 .hover.hide {
    visibility: visible;
  }

Also, you aren't toggling the class on the proper element.
See this: http://jsfiddle.net/HEkqq/4/

        $(document).ready(function() {
            $(function() {
                $("table tr").hover(function() {
                    $('.hide', this).addClass("hover");
                }, function() {
                    $('.hide', this).removeClass("hover");
                });
            });
        });

Also, also, you should to it like this: http://jsfiddle.net/HEkqq/6/

$(document).ready(function() {
    $("table tr").hover(function() {
        $('.hide', this).toggleClass("hover");
    });
});

edited Apr 13, 2011 at 14:52

answered Apr 13, 2011 at 14:47

x10

3,8401 gold badge26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Red Taz Over a year ago

CSS is perfectly correct. I am adding the hover class to the element I want to target, the table row. Also, toggleClass effectivly does the same job.

Adam Terlson · Accepted Answer · 2011-04-13 14:55:46Z

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/

Collectives™ on Stack Overflow

jQuery Hover, display and visibility CSS not properly applied in IE7 and below

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related