0

tr background プロパティは IE7 では機能しないようです。行の bgcolor を交互にして、マウスが行にあるときに別の色にしたい。tbody tr.d1 td{background:#f1f1f1;}行全体ではなく、セルの色にのみ影響するため、テーブルを使用できませんtbody tr.d1 td:hover{background:#f1f1f1;}...誰もがこのコードを機能させる方法についてアイデアを持っていますか?:

<html>
    <head>  
      <script type="text/javascript" src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" ></script>      
      <style type="text/css">
        table tbody tr.d1 td{background:transparent;}
        table tbody tr.d2 td{background:transparent;}
        table tbody tr.d1{background:#f1f1f1; color:#363636;}
        table tbody tr.d2{background:white; color:#363636;} 
        table tbody tr.d1:hover, tr.d2:hover{background:#FFF5C3; color:#FF7260;} 
      </style>        
    </head>
<body>  
    <table  class="sortable">
      <thead> 
        <tr>
          <th >Index</th> 
          <th><span class="nowrap">Parameter Name</span></th>
          <th><span class="nowrap">Parameter Value</span></th>
          <th><span class="nowrap">Page Name</span></th>
          <th ><span class="nowrap">Page Name</span></th>
          <th ><span class="nowrap">Page Name</span></th>
          <th ><span class="nowrap">Page Name</span></th>
          <th class="sorttable_nosort scrollbarCol"></th> 
        </tr>
      </thead>  
      <tbody>
            <tr class="d1">
              <td>4_1</td> <td>gfryn</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d2">
              <td>4_2</td> <td>aegr</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> 
            </tr>
            <tr class="d1">
              <td>4_3</td> <td>ryj</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d2">
              <td>4_4</td> <td>styj</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d1">
              <td>4_5</td> <td>rth</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d2">
              <td>4_6</td> <td>srhfr</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d1">
              <td>4_7</td> <td>sryh</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> 
            </tr>
            <tr class="d2">
              <td>4_8</td> <td>et5h</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> 
            </tr>
      </tbody>
    </table>
  </body>
</html>

[編集]
JavaScript の回避策はどのようになりますか?

4

3 に答える 3

2

background:transparentIE7 は常に頭痛の種です。IE7がこのように理解する理由はわかりませんが、*background-color:none最終的には機能します。

http://jsfiddle.net/NAGyt/1/

そして、td:hoverこれがあなたに役立つことを願っています：

http://jsfiddle.net/NAGyt/2/

とにかく、IE7の詳細については、これらの リンクを確認してください。:hover

于 2011-11-16T16:06:58.633 に答える
0

これを試して：

OLD: table tbody tr.d1:hover td, tr.d2:hover td {background-color:#FFF5C3; 色:#FF7260;}

  table tbody tr:hover, tr:hover td {background-color:#FFF5C3; color:#FF7260;}

あなたのコードでそれを置き換えます：

<style>
        table tbody tr.d1{background-color:#f1f1f1; color:#363636;}
        table tbody tr.d2{background-color:white; color:#363636;} 
        table tbody tr:hover, tr:hover td{background-color:#FFF5C3; color:#FF7260;} 
</style>

js (jQuery) の回避策

$(tr).hover( 
  function() {
    $(this).toggleClass("highlight");
  }
);

CSS:

.highlight {background-color:#FFF5C3; color:#FF7260;}
于 2011-11-16T16:19:23.837 に答える
0

貼り付けたコードは、ホバー時に行の色と背景色が交互に変化する IE7 で完全に動作するようです。

IE7 の場合、IE8 と開発者ツールバーを使用してコードをテストしていますか。はいの場合は、次のように設定してみてください。

ブラウザ モード: IE 7 ドキュメント モード: IE 7 標準

デフォルトでは、ブラウザ モードを IE 7 に変更すると、ドキュメント モードは Quirks モードに変わります。したがって、両方の設定を設定してから、コードをテストします。

于 2011-11-16T17:08:02.703 に答える