CSSを使ったフォトギャラリーを作成しているのですが、うまくいきません。

マウスを画像にあてた瞬間画像が点滅してしまいます。
■下記は作成の参考にしたサイトです。
http://www.lucky-bag.com/appendix/css-photo-gallery/gallery.html

どなたか原因を教えてください。下記は実際私が作ったものです。
http://128.121.67.1/test/test.html

回答の条件
  • 1人2回まで
  • 登録:2007/01/13 05:59:40
  • 終了:2007/01/13 15:48:33

ベストアンサー

id:retla No.1

retla回答回数16ベストアンサー獲得回数12007/01/13 06:56:24

ポイント35pt

原因は、マウスカーソルを合わせるとa要素がマウスカーソルの外に逃げてしまうことです。a要素がマウスの外と内を行ったり来たりするせいで点滅したように見えます。

改善する方法は、

#gallery a:hover {
  width: 360px;
  height: 290px;
  padding: 100px 0 0 341px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 20;
}

のようにオンマウス時の位置調整をパディングで行えばいいと思います。マージンだと要素外ということになってしまうので、要素内であるパディングを使います。

id:finnapple

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

「margin」から「padding」に変えましたら無事うまく動きました。

ありがとうございます。

2007/01/13 15:44:28

その他の回答(1件)

id:retla No.1

retla回答回数16ベストアンサー獲得回数12007/01/13 06:56:24ここでベストアンサー

ポイント35pt

原因は、マウスカーソルを合わせるとa要素がマウスカーソルの外に逃げてしまうことです。a要素がマウスの外と内を行ったり来たりするせいで点滅したように見えます。

改善する方法は、

#gallery a:hover {
  width: 360px;
  height: 290px;
  padding: 100px 0 0 341px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 20;
}

のようにオンマウス時の位置調整をパディングで行えばいいと思います。マージンだと要素外ということになってしまうので、要素内であるパディングを使います。

id:finnapple

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

「margin」から「padding」に変えましたら無事うまく動きました。

ありがとうございます。

2007/01/13 15:44:28
id:avena No.2

avena回答回数48ベストアンサー獲得回数72007/01/13 07:09:06

ポイント35pt

《対処》

#gallery a:hover {

(略)

margin: 100px 0 0 341px;

(略)

}

ここの "margin" を "padding" にすればOK です。

《原因》

padding にすれば、拡大された画像の「フチ」の部分にカーソルが合わさった状態とみなされるので、拡大された状態が保たれます。(左のサムネイルの部分に、右に拡大された画像の透明のフチがかぶさった状態になっているからです。)

が、ここが margin になっていたため、拡大された状態の画像の「外側」にカーソルがはずれた状態とみなされて hover が効かなくなり、その瞬間、拡大表示されている状態から元にもどってしまっていたのです。

id:finnapple

詳しい説明ありがとうございます。

無事解決いたしました。

2007/01/13 15:46:42

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません