photoBy: http://www.suntory.co.jp/news/2012/l_img/l_11457-1.jpg
スマートフォンサイトのリンク色cssはhover使えない
どうやって色かえるの？
スマートフォンサイトでは、リンクをクリックしてもうまく背景色が変わらない。
まして、 aタグにはなんかやりようがあるが、 li タグをタッチしたら色変更ってのができない。
jquery の touch イベントを使ったが無理だった。
解決法
まずはCSSでタッチしたときの色変更を無効に。ついでに タッチしたときのCSSも設定。
/*
タップしたときに色を変更させない
*/
li,a {
-webkit-tap-highlight-color:transparent; background-color:transparent; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
a:hover {
text-decoration:none;
}
.touched {
background-color:#FFC !important;
}
これでデフォルトの色変更を無効に。
そして、タッチしたときに touched の色が適用される
jquery で li がタッチされたら css を付けると共にリンク移動
<script type="text/javascript">
$(function(){
$("li").click(function(){ $("*").removeClass("touched"); $(this).addClass("touched"); window.location=$(this).find("a").attr("href"); return false; });
});
</script>
これでリンク移動 + 色変更ができますよ。
↧