hoverのスタイルをスマホで実装する方法完全版【html】

<a href="javascript:void(0);" class="btn" ontouchstart="">ボタンサンプル</a>

<a href="javascript:void(0);" class="btn">ボタンサンプル</a>

/* スマホの時は:active */
@media screen and (max-width: 1000px) {
	.dropdown {
		opacity: 1;
	}

	.dropdown:active {
		opacity: 0.7;
	}
}

/* PCの時は:hover */
@media screen and (min-width: 1001px) {
	.dropdown {
		opacity: 1;
	}

	.dropdown:hover {
		opacity: 0.7;
	}
}

<div class="dropdown" id="dropdown">
	<button class="dropbtn">メニュー</button>
	<div class="dropdown-content">
		<a href="#">リンク 1</a>
		<a href="#">リンク 2</a>
		<a href="#">リンク 3</a>
	</div>
</div>

/* スマホデバイス用の「.hover 」クラスを付与したスタイル */
.dropdown.hover .dropdown-content {
  opacity: 1;
  transform: translateY(0);
}

.dropdown.hover .dropbtn {
  opacity: 0.7;
}

/* PCデバイス用の「:hover」用のスタイル */
@media (hover: hover) {
	.dropdown:hover .dropdown-content {
		opacity: 1;
		transform: translateY(0);
	}

	.dropdown:hover .dropbtn {
		opacity: 0.7;
	}
}

// 要素を取得
var target = document.getElementById('dropdown');

// タッチ開始時のイベントリスナー
// タッチしている間hoverクラスを付与
target.addEventListener('touchstart', function () {
	this.classList.add('hover');
});

// タッチ終了時のイベントリスナー
// タッチが終了したらクラスを削除
target.addEventListener('touchend', function () {
	this.classList.remove('hover');
});

/* スマホデバイス用の「.hover 」クラスを付与したスタイル */
.dropdown.hover .dropdown-content {
  opacity: 1;
  transform: translateY(0);
}

.dropdown.hover .dropbtn {
	opacity: 0.7;
}

/* PCデバイス用の「:hover」用のスタイル */
@media (min-width: 768px) {
	.dropdown:hover .dropdown-content {
		opacity: 1;
		transform: translateY(0);
	}

	.dropdown:hover .dropbtn {
		opacity: 0.7;
	}
}

// スマホの場合はクリックでドロップダウンを制御
if (window.matchMedia("(max-width: 767px)").matches) {
	let dropdown = document.getElementById('dropdown');
	dropdown.addEventListener('click', function () {
		dropdown.classList.toggle('hover');
	});
}