jQuery Hover, отображение и видимость CSS не применяются должным образом в IE7 и ниже - PullRequest
Новая
       2

jQuery Hover, отображение и видимость CSS не применяются должным образом в IE7 и ниже

0 голосов
/ 13 апреля 2011

Может кто-нибудь взглянуть на небольшой тестовый пример ниже и сказать мне, почему div (.hide) никогда не виден в IE7 и IE6.

(NB Я понимаю, что jQuery's hide () & showМожно использовать методы (), но я бы предпочел использовать решение на основе CSS, которое опирается на классы, а не на то, чтобы jQuery записывал встроенные стили в 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>

Ответы [ 2 ]

1 голос
/ 13 апреля 2011

У вас неправильный CSS: 

 .hover .hide {
    visibility: visible;
  }

должно быть: 

 .hover.hide {
    visibility: visible;
  }

Кроме того, вы не переключаете класс на соответствующий элемент.
Смотрите это: http://jsfiddle.net/HEkqq/4/

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

Кроме того, вам также следует сделать следующее: http://jsfiddle.net/HEkqq/6/

$(document).ready(function() {
    $("table tr").hover(function() {
        $('.hide', this).toggleClass("hover");
    });
});
0 голосов
/ 13 апреля 2011

Не уверен, что это решит вашу проблему, потому что я не могу на самом деле воспроизвести вашу проблему (у меня только IE7 через IE9 доступен для меня), но попробуйте сделать что-то вроде этого: 

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

Доказательство в скрипке: http://jsfiddle.net/HEkqq/7/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...