clipプロパティでマウスがa要素の上に乗ったときに画像全体を見えるようにするソースでうまくいかない

質問

clipプロパティでa要素の上にマウスのカーソルが乗っていないときに画像の一部を見せて、a要素の上に乗ったときに画像全体を見せるソースを作ったのですが、a要素に乗っていないときは画像の一部だけ見え、乗ったときでも変化がありません。
それは、

http://w3g.jp/css/display_position/clip

このサンプルを見て作ったのですが、
1.IE7でURLのサンプルは正常に動作する。
2.自作のソースでIE7で試したときに、a要素の上に乗っても画像が変わらない。
3.自作のソースでIE7以外（Firefox2、Opera9、Safari3）は正常に画像全体が見える。
「2」の自作のソースでIE7のときのみ正常に動作しません。これは何が原因なのでしょうか？
回答よろしくお願いします。

■CSSソース
img.clip { position: absolute;
clip: rect(10px 50px 50px 25px); }
a:hover img.clip { clip: rect(0 256px 387px 0); }
■HTMLソース
<a href="image.jpg"><img src="image.jpg" class="clip" /></a>

回答No.2

auty · ベストアンサー

すっきりとした説明が出てこないところを見ると、

IE7の仕様なのか、バグなのか知りませんが、共通性の無いところはわれわれを悩ませるところですね。おそらく当ページの製作者も経験として知っていたのでデフォルトのCSSとして設定していたのでしょうね、

お礼

IE7の仕様かあるいはバグということですか。
はっきりとは分からないんですね。

ありがとうございました。

回答No.1

auty

a:hover img.clip {
background:transparent;
clip : rect(0 320px 240px 0) ;
}
としてみてください。
指定URLの
<link rel="stylesheet" type="text/css" href="../../style/default" />
にありました。

お礼

今更ですが、お礼の記載が大変遅くなり、申し訳ありません。

ありがとうございました。

補足

「background:transparent;」でうまくいきました。
ありがとうございます。
背景を透過色にすることで画像全体を表示することができるんですね。
しかし、IE7以外で「background:transparent;」がなくても正常に動作するのになぜIE7のみうまくいかないのでしょうか？
すいませんがよろしくお願いします。