Question

tr后台属性似乎在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 workarround看起来像？

Answer 1

IE7总是令人头疼，我不知道为什么IE7以这种方式理解background:transparent但*background-color:none终于有效了：

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

对于td:hover我希望这对你有所帮助：

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

无论如何，请查看these links，了解有关IE7中:hover的更多信息。

Answer 2

试试这个：

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;}

Answer 3

您粘贴的代码似乎在IE7中完美运行，悬停时交替的行颜色和背景颜色更改。

对于IE7，您是否使用IE8和开发人员工具栏来测试您的代码。如果是，请尝试设置：

浏览器模式：IE 7 文档模式：IE 7标准

默认情况下，将浏览器模式更改为IE 7时，文档模式将变为Quirks模式。因此，设置两个设置，然后测试您的代码。

CSS tr后台不工作IE7

3 个答案: