2011-06-22 6 views
1

マウスがテーブルのどの部分にも移動したときに、暗い緑色になるようにtdを取得するにはどうすればよいですか?テーブルのCSSホバーがテーブルの境界線とtdの両方に影響を与えます

IE 6でお願いします。

セルスペースについて不平を言ってはいけません.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> 

答えて

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

jsFiddle Demo

これはちょうどあなたのコードのように、IE6の下では動作しません。 :hoverは、IE6の特定の要素でのみサポートされています。

3

IE6では、リンク以外は:hoverを使用できません。このような効果を得たい場合は、JavaScriptを使用するか、<a>をセルに配置して、セルと同じ大きさにする必要があります。

0

JSは、IEのこのバージョンでこれを実行できる唯一の方法です。

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

は、ここで私はそれをテストし、それがIE6で動作する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/

でそれを行う方法です。

関連する問題