-1

私がしたいのは、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要素にインラインマウスオーバーおよびマウスアウトイベントを登録し、hoverクラスが追加されました。tr をマウスアウトすると、hoverクラス名が削除されます。

ありがとう、カリル

4

1 に答える 1

0

代わりにandonmouseoverイベント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＆CSSに変更できます。これはIE6でサポートされています。IE6はCSSセレクターをサポートしていないため:hover、この修正を使用し:hoverてIE6で使用することもできます：http：//blog.delivi.com/javascript/updated-hover-for-non-anchor-elements-in-ie6/

于 2013-01-11T02:26:42.680 に答える