jQuery Hover，显示和可见性CSS在IE7及更低版本中未正确应用
|
有人可以看看下面的小测试案例，并告诉我为什么div（.hide）在IE7和IE6中永远不可见。
（注：我意识到可以使用jQuery的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 个回复
姬第柔炒
<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>茬贺努充尽
.hover .hide { visibility: visible; }.hover.hide { visibility: visible; }$(document).ready(function() { $(function() { $(\"table tr\").hover(function() { $(\'.hide\', this).addClass(\"hover\"); }, function() { $(\'.hide\', this).removeClass(\"hover\"); }); }); });$(document).ready(function() { $(\"table tr\").hover(function() { $(\'.hide\', this).toggleClass(\"hover\"); }); });