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

我想做的是改变span元素(它有一个背景图像)的可见性，当我悬停它，它停留在一个td元素。

在高级浏览器(包括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类名。

谢谢,哈利勒

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

相关内容

最新更新

热门标签：