jQuery悬停，显示和可见性CSS在IE7和IE6中未正确应用

有人可以看看下面的小测试案例，并告诉我为什么div（.hide）在IE7和IE6中永远不可见。jQuery悬停，显示和可见性CSS在IE7和IE6中未正确应用

（注：我知道，jQuery的隐藏（）&显示（）可以使用的方法，但我更愿意使用基于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>

来源

2011-04-13 Red Taz

这对我的作品在IE7-9，铬：http://jsfiddle.net/HEkqq/（我没有改变任何东西） – 2011-04-13 14:45:13

为什么你想支持一个垂死的东西？ – 2011-04-13 14:51:37

现在来吧，IE6可能会快死了，但是7仍然在这里。 – x10 2011-04-13 14:52:08

不知道这将解决您的问题，因为我不能真正复制你的问题（我只有通过IE9 IE7 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/

来源

2011-04-13 14:55:46

您有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"); 
    }); 
});

来源

2011-04-13 14:47:40 x10

CSS是完全正确的。我将悬停类添加到我想要定位的元素表格行中。另外，toggleClass可以有效地完成相同的工作。 – 2011-04-13 15:04:33

jQuery悬停，显示和可见性CSS在IE7和IE6中未正确应用

回答

相关问题