Tweet

皆さんはマウスオーバー（ロールオーバー）した際にどういう動作をしてほしいですか？
いつもWebサイトをみていて変に感じることがあります。ボタンの画像などにマウスを載せた際の挙動が、思っているものとは違っている場合がよくあるのです。

その挙動とはこういうものです。
マウスオーバー時（a:hover）つまりまだマウスボタンはクリックしておらず、ボタンの上にマウスを載せただけにもかかわらず、まるでボタンが押下されたように凹んだものが表示されてしまう。以下はその動作サンプル
私のウィッシュリストへ

上記のような凹んだものを見せるタイミングとしては、マウスオーバー時ではなくマウスクリック時（a:active）が適してるのではないでしょうか。やはり実際のメカニカルなボタンもそうですが、押下されたときに凹んだ方が自然ですよね。「押そうかな？」と指を近付けただけで部屋の電気が消えたり換気扇が回ったりするのは困りますから。
私のウィッシュリストへ

押下したときだけでなくマウスオーバー時にも何らかの反応を入れたいのであれば、ボタンを凹ませたりするのではなく色が変化するとかテキストにアンダーラインが引かれるという動きで知らせたほうが良いかと思います。
私のウィッシュリストへ

正直なところタッチインタフェースを使うのがWebサーフィンの主流となった今では、そんなことすらどうでもよくなっていますけどね（どうせマウスオーバー効かないし）。でもたまにパソコンで観るとやっぱりこういうところは気になるものですから。

投稿者 ジェット☆ダイスケ : 2010年4月11日 20:28