ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
QNo.3944687 clipプロパティでマウスがa要素の上に乗ったときに画像全体を見えるようにするソースでうまくいかない
質問者：miya_HN 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>
困り度：
  • 困っています
質問投稿日時：
08/04/13 08:47
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答良回答20pt
ANo.2 すっきりとした説明が出てこないところを見ると、

IE7の仕様なのか、バグなのか知りませんが、共通性の無いところはわれわれを悩ませるところですね。おそらく当ページの製作者も経験として知っていたのでデフォルトのCSSとして設定していたのでしょうね、
回答者：auty
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：
08/04/13 13:27
この回答へのお礼IE7の仕様かあるいはバグということですか。
はっきりとは分からないんですね。

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

回答
ANo.1 a:hover img.clip {
background:transparent;
clip : rect(0 320px 240px 0) ;
}
としてみてください。
指定URLの
<link rel="stylesheet" type="text/css" href="../../style/default" />
にありました。
回答者：auty
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：
08/04/13 09:37
この回答への補足「background:transparent;」でうまくいきました。
ありがとうございます。
背景を透過色にすることで画像全体を表示することができるんですね。
しかし、IE7以外で「background:transparent;」がなくても正常に動作するのになぜIE7のみうまくいかないのでしょうか？
すいませんがよろしくお願いします。
この回答へのお礼この回答にお礼をつける(質問者のみ)
 
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ