当图像位于 td 元素中时，如何更改图像在 IE6 中的可见性答案

【问题标题】：How can I change the visibility of the image in IE6 when it's in a td element当图像位于 td 元素中时，如何更改图像在 IE6 中的可见性
【发布时间】：2013-01-11 17:02:21
【问题描述】：

我想要做的是在我将其悬停在 td 元素中时更改 span 元素（具有背景图像）的可见性。

在高级浏览器（包括 IE7,8）中一切正常，但在 IE6 中无法正常工作。

我想不通。你们有遇到和我一样的情况吗？

如下代码：

 <html>
 <head>
  <title> New Document </title>
  <style>
     .btn{
        cursor: pointer;
        display: inline-block;
        width: 100px;
        height: 100px;
        background-position: 0 0;
        background-repeat: none;
        background-image: url('http://up.ekoooo.com/uploads2/allimg/091024/9_091024065737_1.jpg');
    }
    .default-hidden{
        visibility: hidden;
    }
    .hover .default-hidden{
        visibility: visible;
    }
  </style>
 </head>
 <body>
    <table>
        <tbody>
            <tr onmouseover="this.className='hover';" onmouseout="this.className='';">
                <td>
                    2222222<span class="btn default-hidden">000000</span>33333
                </td>
            </tr>
        </tbody>
    </table>
 </body>
</html>

我在 tr 元素上注册了内联 mouseover 和 mouseout 事件，当您将鼠标悬停在它上面时，然后将 hover 类添加到其中；当您将鼠标移出 tr 时，我只需删除 hover 类名。

谢谢，哈利勒

【问题讨论】：

人们还在支持 IE6？
部分统计：中国主要IE版本为IE6，因使用盗版Windows操作系统（因license检查无法升级）
是的，你完全正确，猛禽。 IE6的份额约为22%，可以在browser share from baidu查看

标签： javascript internet-explorer-6

【解决方案1】：

将onmouseover 和onmouseout 事件改为<td>：

<table>
  <tbody>
    <tr>
      <td onmouseover="this.className='hover';" onmouseout="this.className='';">2222222<span class="btn default-hidden">000000</span>33333</td>
    </tr>
  </tbody>
</table>

这是JSFiddle

UPDATE：针对IE6，可以将表结构改为DIV & CSS，IE6支持。由于 IE6 不支持 :hover CSS 选择器，您也可以使用此修复在 IE6 中使用 :hover：http://blog.delivi.com/javascript/updated-hover-for-non-anchor-elements-in-ie6/

【讨论】：

感谢您的快速回复。我想在悬停整个 tr 元素时显示td，而不仅仅是 td。
将其转换为<div>。 <tr> IE6 不支持 JS 事件
是的，猛禽，你是对的。
效果很好。但就我而言，它是一个列表，所以我选择表格布局来获取它。有什么解决办法吗？
没有。你不能让 IE6 支持它不支持的功能。
替代解决方案的更新答案