今までは@media (hover: hover) and (pointer: fine)でhoverを指定することで、タッチデバイス以外のデバイスにhoverを指定してきました。

しかし、最近M1 iPad Air + Magic Keyboard for iPad を購入して気がついたのですが、Magic Keyboardなどのカーソル操作をiPadで行おうとしたときにhover処理が機能していません。

少し調べると@media (hover: hover)では、主な入力デバイス（iPadの場合はタッチ操作）のみを検知するのに対し、@media (any-hover: hover)では複数の入力デバイスの中で1つでも対応している機器が接続されている場合に適応されます。

これによって、Magic Keyboardが接続されている時のみhoverが機能し、外されると機能しなくなります。ただ、接続されているときはタッチ操作でもhoverが機能してしまいます。

// 今まで
@media (hover: hover) and (pointer: fine) {
	.Elm:hover {
		// hover処理
	}
}

// これから：入力デバイスに1つでもhover対応のものがあったら
@media (any-hover: hover) {
	.Elm:hover {
		// hover処理
	}
}