人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSを使ったフォトギャラリーを作成しているのですが、うまくいきません。
マウスを画像にあてた瞬間画像が点滅してしまいます。
■下記は作成の参考にしたサイトです。
http://www.lucky-bag.com/appendix/css-photo-gallery/gallery.html

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

●質問者: 雨の日
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS ギャラリー サイト マウス 作成
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● retla
●35ポイント ベストアンサー

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

改善する方法は、

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

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

◎質問者からの返答

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

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

ありがとうございます。


2 ● avena
●35ポイント

《対処》

#gallery a:hover {

(略)

margin: 100px 0 0 341px;

(略)

}

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

《原因》

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

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

◎質問者からの返答

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

無事解決いたしました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ