スマホで：hoverを使ってリンク色を変える方法

スマホサイトでタップした時のリンク色を変えたいときのTips。

本来ならば:hoverだけでリンク色を変えることができるのですが、iOSはなぜかこの:hoverが指を話した時に効いてしまうというバグがあります。

※ iPhone5は:hoverが使えるようになったようです！

Androidですと:hoverが使えるので問題ないのですが、その変わりタップした際にリンク回りに枠線が表示される仕様になっています。
残念ながらCSSだけでは対応しきれないため、jQueryを使用します。
まず、ハイライトカラーの設定からしていきます。

ハイライトカラーの設定 iOSの場合

iOSの場合は

-webkit-tap-highlight-color:色;

だけでハイライトカラーの設定は完了です。ちなみに、

-webkit-touch-callout:none;

この記述をプラスしてあげると、リンクを長押しした際のポップアップメニューを非表示にすることができます。

Androidの場合、上記に記載した-webkit-tap-highlight-colorは使えません。
使えることは使えるのですが、色指定はできず、ハイライトカラーをオフにすることしかできないようです。ですので、

-webkit-tap-highlight-color:(0,0,0,0);

カラーの値を全て0にすることでハイライトカラーをオフにすることができます。

ということでiOSとAndroid両方のハイライトカラー設定の下準備です。

a{
  background-color:transparent;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

この時点ではまだ背景色は記述しません。
ここからが本番？です。jQueryを読み込んでいきます。

こちらのプラグインを読み込みます。
※ jQueryを先に読み込んでおいて下さいね

touch.jsなどという名前で保存して読み込みます。
記述する順番はjquery本体を先に読み込んでから使います。

<head>
<script src="/js/jquery.js"></script>
<script src="/js/touch.js"></script>
</head>

このプラグインでは、クラス.hoverを使うことでタップ前のリンク色を自由に設定できるようになっています。

そして最後にCSSで:hoverした時のリンク色や背景色の設定をしていきます。

a {
  color:red;/* タップ後の色 */
}

a.hover {
  color:green;/* タップ前の色 */
}

だがしかし、Androidの実機を持っていないのでAndroidでの挙動はちと怪しいです…。
ここまで書いておいてすみません。
iPhone4ではばっちりでしたので、リンク色を変えたい！という時は使って見て下さい♪