内部に別のリンクを配置できるボックスリンクの実装方法

.linkbox {
	position: relative; /* 擬似要素が absolute で配置される際の基準とする */
	isolation: isolate; /* 内部のz-index順位と外部のz-indexを混同させない。 */

	/* ボックスリンクとしてのスタイル */
	display: block;
	color: inherit;
	text-decoration: none;
	pointer-events: auto;
	cursor: pointer;
}


/* ボックス全体をクリックした時の対象にしたいメインリンク */
.linkbox__mainlink {
	position: static; /* staticにして擬似要素の配置基準を親（.linkbox） までスキップ */

	/* テキストリンクのスタイルを打ち消すスタイル */
	text-decoration: none;
	color: inherit;
}


/* クリックエリア拡大のための擬似要素 */
.linkbox__mainlink::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1; /* 他のコンテンツより上に重なるように */
}

/* 内部リンクをクリック可能にする */
:where(.linkbox) a:not(.linkbox__mainlink) {
	position: relative; /* z-index を効かせる */
	z-index: 2; /* .linkbox__mainlinkの擬似要素より上へ */

	@media (any-hover: hover) {
		&:hover{
			opacity: 0.5;
		}
	}
}


/* :has がサポートされているブラウザでは、内部のメインリンクにフォーカスがある時はボックス全体に outline を表示する */
@supports selector(:has(*)) {
	.linkbox:has(.linkbox__mainlink:focus-visible) {
		/* ブラウザ標準スタイルで適用する。（好きにカスタマイズしてください） */
		outline: auto 1px;
		outline: auto 1px -webkit-focus-ring-color;
	}

	/* メインリンクのフォーカスは非表示 */
	.linkbox__mainlink:focus {
	  outline: 0;
	}
}

<div class="linkbox -bd -bgc:base -p:30 -g:10 -hov:bxsh -hov:bdc" style="--bdw: 2px; --hov-bdc: var(--link)">
	<h3>
		<a class="linkbox__mainlink" href="#linkbox-demo">Heading Link</a>
	</h3>
	<p class="-my-s:10">
		Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi
		provident.
	</p>
	<p class="-my-s:20">
		<a href="#inner-link">Inner Link</a>
	</p>
</div>

/* linkboxスタイル */
@import '../_src.css';


/* ._linkoff クラスが付与されている間は、擬似要素を非表示にする */
.linkbox._linkoff .linkbox__mainlink::before {
	content: none; /* pointer-events: none; でも OK */
}


/* 状態がわかりやすいように色付け（デモ用） */
.linkbox._linkoff {
	color: green;
	border-color: green;
}

<div class="linkbox -bd -bgc:base -p:30 -g:10 -hov:bxsh -hov:bdc" style="--bdw: 2px; --hov-bdc: var(--link)">
	<h3>
		<a class="linkbox__mainlink" href="#linkbox-demo">Heading Link</a>
	</h3>
	<p class="-my-s:10">
		Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi
		provident.
	</p>
	<p class="-my-s:20">
		<a href="#inner-link">Inner Link</a>
	</p>
</div>

(() => {
	const boxes = document.querySelectorAll('.linkbox');

	boxes.forEach((box) => {
		let isLinkDisabled = false;

		// リンクを無効化してテキスト選択可能にする
		function disableLink() {
			if (isLinkDisabled) return;
			isLinkDisabled = true;
			box.classList.add('_linkoff');
		}

		// リンクを有効化
		function enableLink() {
			if (!isLinkDisabled) return;
			box.classList.remove('_linkoff');
			isLinkDisabled = false;
		}

		// pointermove: マウス移動時にAltキーの状態をチェック（フォーカス不要）
		box.addEventListener('pointermove', (e) => {
			if (e.altKey) {
				disableLink();
			} else {
				enableLink();
			}
		});

		// keydown: ホバー中かつAltキーが押されたらリンク無効化
		function onKeyDown(e) {
			if (e.altKey && box.matches(':hover')) {
				disableLink();
			}
		}

		// keyup: Altキーが離されたらリンク有効化
		function onKeyUp(e) {
			if (!e.altKey) {
				enableLink();
			}
		}

		// keydownとkeyupも登録（フォーカスがある場合に対応）
		window.addEventListener('keydown', onKeyDown);
		window.addEventListener('keyup', onKeyUp);

		// pointerleave: ホバー終了時にリンク有効化
		box.addEventListener('pointerleave', () => {
			enableLink();
		});
	});
})();