cssで「a :hover」で拡大画像の指定をしてもできませんでした。
cssで「a :hover」で拡大画像の指定をしてもできませんでした。
いつもの書き方で「a href="test.jpg" 画像指定」すればクリックで拡大表示できます。
2月12日講師からのコメントでは...
「宿題は中止します。理由ですが、答えはIE6では無効な書き方で
あるのが判明したためです。IE6以外のブラウザでは動きますが
IEは7でないとダメのようです。」
そうなんだ..と納得していたのですが、次の日のコメントでは...
「IE6では動作しないCSSを宿題にしたのはミスでした。 では不可能なのか？と問われれば、可能と答えましょう。 ちょっと面倒なようですが次のようになります。」 と、模範解答の提示をしてくれました。
論より証拠のお言葉に従い、さっそく試してみたのが下記の画像です。
a:hover 効果が見事に現われて気持ちいいです！
不可能かと思われる事例を可能にしてしまう講師ってホントすごいなぁ。
解答に添えられた講師のコメントです。
クラス属性「photo」は無くてもいいですがサムネイル画像と大きな画像の位置がずれるのを避けるには必要です。 div { position: relative; top: 0; left: 0; } では解答にはともかく実用では他のCSSとバッティングしそうです。
クラス属性「photo」のなかにA要素。そのA要素にクラス属性「enlarge」 さらにA要素内の画像にクラス属性「large」となっています。
この書き方は念のため検証するとValid、合格です。 画像を同じものとは言え2行に書いたということで、採点すれば50点くらいでしょうか(苦笑)
2月2日出題の内容は．．．
テスト画像(200px×133pxで表示)を、マウスがある動作をしたときに、画像の サイズが800px×532pxに拡大表示されるようにCSSを 作ってください。
画像は1点のみで表示されている画像そのものが拡大 されるようにします。
CSSでマウスがどうしたときに変化を起こせたかを 思い出してください。