PCページと違い、スマフォやタブレットではマウスを使わないため、 マウスオーバーの概念が存在しません。
ですが、タップした時の挙動を制御することは可能です。    

jQueryで指定

jQueryにはタップした時のイベントが用意されています。
それが、「touchstart」と「touchend」です。 ■サンプル ・タップした時にボタンを差し替える例

$(function(){ //タップ開始時 $(‘img.btn’).on({ touchstart: function () { var newImg = $(this).attr(‘src’).replace(‘.jpg’,’_ac.jpg’); $(this).attr(‘src’,newImg); } }); //タップ終了時 $(‘.img.btn’).on({ touchend: function () { var newImg = $(this).attr(‘src’).replace(‘_ac.jpg’,’.jpg’); $(this).attr(‘src’,newImg); } }); });

cssで指定

PCと同様に擬似クラスタの「active」で指定可能です。 上記のサンプルと同様なものをCSSで実現するなら…

a.btn { display: block; width: 200px; height: 50px; background: url(../img/hoge.jpg) left top no-repeat; } a.btn:active { background: url(../img/hoge_ac.jpg) left top no-repeat; }

このようになります。    

タップ時の薄黒い背景を消す

実際に試してみるとわかりますが、iPhoneではタップ時に、 リンクエリアを薄黒い背景が出てくると思います。 それがあるとせっかくタップ時の挙動を設定しても残念なので、 この背景も消してしまいます。

.btn { -webkit-tap-highlight-color: transparent; }

これで一通り完了です。 実際これを実装する場合、リンクするボタンに設定してもすぐ切り替わってしまうので、 あまり効果がないと思いますが、リンク以外でタップする時の動作を指定したい場合は、 色々なバリエーションが使えると思います。

アクトゼロではただいま「Webデザイナー」の採用活動を行っています。

2013/08/20～2013/09/02　の期間限定となっております。
新卒・中途は問いませんので、ぜひぜひお気軽にご連絡ください。