Question

我想要做的是在我悬停时更改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元素上注册了内联鼠标悬停和mouseout事件，当你将鼠标悬停在它上面，然后添加了hover类;当你删除tr时我只删除hover类名。

感谢，方

Answer 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

更新：要处理IE6，您可以将表格结构更改为DIV＆amp; CSS，IE6支持。由于IE6不支持:hover CSS选择器，因此您也可以使用此修补程序在IE6中使用:hover：http://blog.delivi.com/javascript/updated-hover-for-non-anchor-elements-in-ie6/

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

1 个答案: