-1

我想要做的是在我将它悬停在 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类名。

谢谢，哈利勒

4

1 回答 1

0

将onmouseoverandonmouseout事件<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，您可以将表结构更改为 IE6 支持的 DIV & CSS。由于 IE6 不支持:hoverCSS 选择器，您也可以使用此修复:hover在 IE6 中使用：http ://blog.delivi.com/javascript/updated-hover-for-non-anchor-elements-in-ie6/

于 2013-01-11T02:26:42.680 回答