読者です 読者をやめる 読者になる 読者になる

ひとり部長のひとりごと

社会人1年目で社内起業を始めたひとり部長がその経験を語ります。Mac関連もつぶやきます。映画のレビューはサブブログに移行しました。世の中の明るいニュースだけをまとめたエントリーも始めました。

【8行で終わるjQuery】スマホでボタンをhover表示させたい時にやること

HTML/CSS 忘備録

スマホって:hoverが効かないんだよね・・・・もしかしたらiPhoneだけなのかもしれませんが、とにかくhoverが効かない!

きくんだども、タッチした後に効くもんだからリンクボタンなんかに設定しているとせっかくのhoverがわからずにそのまま飛んで行ってしまう・・・。

 

これをなんとかできないか。今日はそんなお話。

とりあえずこいつを触ってください。

スマホで見ている人は、タッチするとhoverが効いたまま変化がないと思います。ここにリンクが貼ってあると、この変化後を見ることもなくリンク先に行ってしまいます。

PCで見ている方は、カーソルを当てれば綺麗にボコボコと動いてくれるはずです。

 

結論

こいつの対策にちょっとだけjQueryを追加してあげて、PC用とスマホ用に変化を2つにわけて用意しますと、こうなります。分けることが大事です。

PCでは外観を変えずにボコボコさせるだけ、スマホでは外観が変わるはずです。

jQuery
$(function() {
/* buttonタグを変化させる */ $('button')
/* 触ったらhoverクラスを適用 */ .bind('touchstart', function() {
$(this).addClass('hover');
/* 離したらhoverクラスを外す */ }).bind('touchend', function() { $(this).removeClass('hover'); }); });
CSS
button {
    /* ここはご自由に */
    width: 40%;
    height: 3em;
    border: 1px solid #E49197;
    border-radius: 4px;
    background-color: #E49197;
    color: #FFF;
    /* iPhone長押し時のポップアップ防止 */
    -webkit-touch-callout: none;
    cursor: pointer;
}

/* スマホ用のhoverクラス */ .hover { border: 2px solid #E49197; border-radius: 4px; background-color: #fff; color: #E49197; } /* PC用のhover要素 */ button:hover { margin-top: 3px; margin-left: 3px; }
HTML
<button>兼用ボタン</button>

以上です。 こんなに簡単にできちゃうんですね! 多分次回も同じようなネタやると思います。