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中未正確應用

回答

相關問題