0

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 会是什么样子？

4

3 回答 3

2

IE7总是很头疼，不知道为什么IE7background:transparent这样理解但是with *background-color:nonefinally作品：

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

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

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

无论如何，请查看这些 链接以获取有关:hoverIE7 的更多信息。

于 2011-11-16T16:06:58.633 回答
0

试试这个：

旧：表 tbody tr.d1：悬停 td，tr.d2：悬停 td {背景颜色：#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 回答