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

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

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

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

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

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

iOSの場合は

CSS
-webkit-tap-highlight-color:色;

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

CSS
-webkit-touch-callout:none;

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

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

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

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

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

iOSとAndroid両方にハイライトカラーを対応させる下準備

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

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

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

jquery.taphover.jsプラグインを読み込む

こちらのプラグインを読み込みます。

  • jQueryを先に読み込んでおいて下さいね

jquery.taphover.js

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

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

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

CSSでスタイルを仕上げる

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

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

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

a:hover {
color:blue;/* タップしている時のリンク色 */
background-color:#CF6;/* ハイライトカラー */
}

デモはこちら

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

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です