Question

有人可以看看下面的小测试用例并告诉我为什么在IE7和IE6中看不到div（.hide）。

（NB我意识到可以使用jQuery的hide（）＆amp; 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>

Answer 1

你错了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");
    });
});

Answer 2

不确定这是否能解决您的问题，因为我实际上无法复制您的问题（我只能通过IE9获取IE7），但请尝试做类似的事情：

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

jQuery悬停，显示和可见性CSS未在IE7及更低版本中正确应用

2 个答案: