ポイント時の変化？
- 0 名前： たも ： 2004/09/02 14:40
- 画像リンクのポイント時に画像を微妙に下に動かせるには、
どうすればいいのでしょうか？
私の知っているタグを使うとリンク文字まで動いてしまうのですが、
リンク画像だけを動かす方法です。
- 1 名前： U D ： 2004/09/02 15:38
- 方法としては、自分の考えた限り、
１．乗ったときの画像を編集しておく（下にずらした画像を表示させる）。
２．乗ったときにJavaScriptとCSSで画像の座標を下にずらす。
のどっちかになるかなぁ。
JavaScriptやCSSが分かれば２だけどなぁ。
１は見せ掛けだからいやだ！…というのであれば２の方法を教えますが、、、
JavaScript は人によって Off にされてたりするんで。
ん？というかリンク文字が動いてしまう方が問題なのか？
それならソースを見せてください。
- 2 名前： DOCTYPE! ： 2004/09/02 16:28
- To: たもさん
> リンク画像だけを動かす方法
CSSなら、セレクタが、 "a:hover" のようになっているはずです。
それを、 "a:hover img" のように変更してみてください。
これが、もし違っているようでしたら、
たもさんの現在のソースを提示してみてください。
To: U Dさん
> １．乗ったときの画像を編集しておく（下にずらした画像を表示させる）。
> ２．乗ったときにJavaScriptとCSSで画像の座標を下にずらす。
場合によっては、U Dさんの仰る方法の方がよいこともあるでしょうが、
:hover擬似クラスをセレクタとして、相対配置するのが一般的だと思います。
- 3 名前： たも ： 2004/09/02 18:27
- ご返事有難うございます。
現在使用しているタグは、"a:hover { position: relative;top:1px; }"
なんですが、DOCTYPE!さんが教えてくださった様に、
"a:hover img"にしたら、両方動かなくなりました。
CSSについていまいち詳しくないのですが、何か間違ってるでしょうか？
- 4 名前： ばあど ： 2004/09/02 22:11 ［URL］
- 多分間違ってるので、間違っているソースを開示頼みます。
- 5 名前： DOCTYPE! ： 2004/09/02 23:33
- > "a:hover img"にしたら、両方動かなくなりました。
おかしいなあ……と思いながら以下のソースをWinIE6で
表示させた所、確かに動きませんでした。
<!-- HTML -->
<p><a href="#"><img src="test.png" alt="テスト"></a></p>
/* CSS */
a:hover img { position: relative ; top: 1px }
色々調べた結果、WinIE6のバグであることが分かりました。
----------------------------------------------------------------------
Internet Explorer (Windows) CSSバグリスト
擬似クラスにスタイル指定がないと
擬似クラスの子孫要素への指定が効かない(IE6)
http://cssbug.at.infoseek.co.jp/detail/winie/b077.html
> 擬似クラスの子孫要素に何らかのスタイルを指定するときは、
> 擬似クラス自体にもスタイルを指定しなければ無視されてしまう。
> a:hover自体にもスタイルを指定するとこのバグを回避できます。
----------------------------------------------------------------------
以下の記述を加えた所、WinIE6でも動くようになりました。
a:hover { background: transparent }
きちんと表示確認せずにレスしてしまって、すみませんでした。
- 6 名前： たも ： 2004/09/11 11:04
- 大分遅くなりましたが、DOCTYPE!さん有難う御座いました。
希望通りの動作になりました。
助かりました。
- 7 名前： ばあど ： 2004/09/12 01:33 ［URL］
- >>5
なるほど、勉強になりました。
