【CSS】スマホでリンクをタップした時に色を変える方法

【CSS】スマホでリンクをタップした時に色を変える方法
スマホでタップ!
色変わる!

実装サンプル

a要素に『ontouchstart』を追記して『a:active』に色を指定します。

See the Pen 【CSS】スマホでリンクをタップした時に色を変える方法 by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<a href="https://125naroom.com/web/3449" target="_blank" ontouchstart>スマホでリンクをタップした時に色が赤に変わる</a>

CSS

a {
  display: inline-block;
  width: 200px;
  padding: 20px;
  border: 1px solid;
}
a:active{
  color : #f00;
}

実装サンプル(リンクじゃなくてもOK)

See the Pen 【CSS】スマホでタップした時に色を変える方法 by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div ontouchstart>スマホでタップした時に色が赤に変わる</div>

CSS

div {
  width: 200px;
  padding: 20px;
  border: 1px solid;
}
div:active {
  color : #f00;
}

さいごに

ページ全部にできますかー?
ページ全部の場合は『<body ontouchstart>』でオッケーですー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

11

/

22

2024

Googleさんの
おすすめ

11

/

22

2024

デザインの記事

水色デザイン
映画『アット・ザ・ベンチ』
【jQuery】スライダープラグイン「slick」実装サンプル集