Question

当鼠标悬停在桌子的任何部分上时，如何让td变成深绿色阴影？

IE 6请

请不要抱怨cellspacing，gmail登录框使用它。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
    <title>yo</title>
      <style type="text/css">
        .square-mosaic-green {
            border: 5px solid #a6e3a6;
            background-color: #ffffff;
            height:75px;
            width: 75px;   
        }

        .square-mosaic-green td {
            background-color:#a6e3a6;
        }

        .square-mosaic-green:hover    {
            border-color: #00ae00;
        }

        .square-mosaic-green td:hover    {
            background-color: #00ae00;   
        }
      </style>

</head>
<body>

    <table class="square-mosaic-green" cellspacing="10">
        <tr>
            <td>

            </td>                    
         </tr>
    </table>
</body>
</html>

Answer 1

在IE6下，您不能在除链接之外的任何内容上使用:hover。如果要实现这样的效果，则需要使用JavaScript，或者在单元格中放置<a>并使其与单元格一样大。

Answer 2

.square-mosaic-green:hover td {
            background-color: #00ae00;   
}

jsFiddle Demo

这在IE6下无效，就像您的代码一样。只有IE6中的某些元素支持:hover。

Answer 3

以下是使用jQuery

的方法

$('.square-mosaic-green').hover(function(){
    $(this).css('backgroundColor','#00ae00');
    $(this).css('borderColor','#00ae00');
    },
  function(){
    $(this).css('backgroundColor','#fff');
    $(this).css('borderColor','#a6e3a6');
    }                           
);

http://jsfiddle.net/jasongennaro/CqqvP/

我测试了它，它可以在IE6中运行。

Answer 4

JS是唯一可以在IE版本中执行此操作的方法。

onmouseover="style.backgroundColor='#000';"

表格的CSS悬停会影响表格边框和td

4 个答案: