重なり順が下の要素をクリックできるようにする

動画の上に装飾の要素を重ねる実装をする機会があったので、装飾の要素の上からでも動画をクリックできるようにする方法を調べました。

サンプルコード

動画の上に要素を重ねて、枠線をつけるようにしてみます。

HTML

<iframe width="560" height="315" src="https://www.youtube.com/embed/rTZGtIoByTg" frameborder="0" allowfullscreen></iframe>
<div class="overlay"></div>

CSS

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 530px;
	height: 285px;
	border: #ff0000 15px solid;
}

動画と同じサイズの要素を上層に配置しているので、クリックしても動画が再生されません。
対応前デモページ
 

JavaScriptで対応が必要かと思ったのですが、重ねた要素にpointer-events: none;を指定することで対応できました。

CSS

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 530px;
	height: 285px;
	border: #ff0000 15px solid;

	/* この要素のイベント無効化 */
	pointer-events: none;
}

対応後のデモページ
クリックだけでなくオンマウスでも反応しています。
pointer-events: none;でその要素がイベントの対象にならないのは知っていましたが、イベント自体は下の要素へと通過するようです。

注意点としてpointer-eventsはIE11からの対応となっています。
対応ブラウザはこちら
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31