Design Studio LEVEL.7

ブログ

最新記事 html/css CSSの擬似クラス :hover をスマホのときに :active に自動で変更するJavascript

CSSの擬似クラス :hover をスマホのときに :active に自動で変更するJavascript

擬似クラス :hover

パソコンで見るとマウスオーバーで色を変更したりアクションを付けられるCSSの擬似クラス :hover ですが、メディアクエリでレスポンシブ対応にした際、そのままだとタッチデバイスで見た場合に挙動がイマイチおかしくなります。

具体的には、背景色を変更するようなhoverの場合は、タッチデバイスだとタップした際に色が変わり、次のhover等のアクションまで指を離しても色が変わったままになります。

これをパソコンで見たときのマウスオーバーで色が変わるのと同じようにスマホでもタップした一瞬だけ色を変えるようにするには以下の手順が必要です。

1.bodyにontouchstart属性(ontouchendでも可)を追加する。

bodyじゃなくてもいいですが、一括で有効になるのでbodyに書くのが楽です。

<body ontouchstart="">
2.CSSで擬似クラス :hover を擬似クラス :active に書き直す。

タッチデバイスで一瞬タップした際のアクションは擬似クラス :active なんですね。
でもパソコンの :hover と同じでいいのに、わざわざ複数作るのも面倒ではありませんか?

自動で変更するjavascript

そこで、タッチデバイスで見たときは自動的に :hover を :active にしてくれるJavascriptを作りました。
元々の内容はタッチデバイスのときは :hover を消す、だったのですが、簡単な修正でOKだったので公開します。

document.getElementsByTagName('body')[0].setAttribute('ontouchstart',''); 
var touch = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
if (touch) {
	try {
		for (var si in document.styleSheets) {
			var styleSheet = document.styleSheets[si];
			if (!styleSheet.rules) continue;
			for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
				if (!styleSheet.rules[ri].selectorText) continue;
				if (styleSheet.rules[ri].selectorText.match(':hover')) {
					//styleSheet.deleteRule(ri);
					styleSheet.rules[ri].selectorText = styleSheet.rules[ri].selectorText.replace(':hover', ':active');
				}
			}
		}
  } catch (ex) {}
}

bodyに追加するontouchstart属性も自動で入れてくれますので、このJavascriptを導入するだけで簡単に擬似クラス :hover を :active に変更できます。
11行目のコメントアウトは :hover を消すときのものですので、:active にしなくてもいいな、という場合は11行目のコメントアウトを外して、12行目をコメントアウトしてください。

2020.8.7追記

androidだとうまくいかない…。
そもそも擬似クラス :active の挙動がおかしい。

コメントを残す

コメントは承認後に反映されます。
承認には数日かかる場合があります。