Safariでホバーが効かない

CSSでホバー時の設定をした際、Safariでのみ効かないということがあったので対応方法をメモ。
確認はSafariのバージョン15.5で行っています。

うまくいかなかった例

ホバー時にopacityの値を変更するclassを用意します。

.sample-hover:hover {
	opacity: 0.4;
}

.sample-hoverをaタグに設定して、中に含める要素を変えていくつか試してみます。

<a class="sample-hover" href="#">テキストのみ</a>

<a class="sample-hover" href="#">
	<div>divタグを含む</div>
</a>

<a class="sample-hover" href="#">
	<p>pタグを含む</p>
</a>

<a class="sample-hover" href="#">
	<span>spanタグを含む</span>
</a>

<a class="sample-hover" href="#">
	<span style="display: block;">spanタグにdisplay: block;が設定されている場合</span>
</a>

chromeやFirefoxでは特に問題なかったのですが、Safariだと「テキストのみ」と「spanタグを含む」のリンクしかホバーの設定が効いていませんでした。
Safariでホバー時にopacityが効かないデモページ

ホバー時にopacityを設定していることが原因の1つであるようで、opacityの代わりにcolorを変更するようにした場合は問題なく効いていました。

.sample-hover:hover {
	color: red;
}

ホバー時にcolorを変更するデモページ

対応方法

インライン要素のaタグ内にブロック要素が含まれている状態だとopacityの設定が効かないようで、aタグにdisplay: block を設定してブロック要素にすると解消されるようでした。

.sample-hover {
	display: block;
}

対応後のデモページ