【マウスオーバー】ブロック要素をリンクにする

ブロック要素をクリックでリンクの動作になります。htmlの構造上、aタグはテキストリンクでのみ使用し、aタグでブロック要素を囲むことはしていません。マウスオーバー時の動作はCSS、クリック時のリンクの動作はjQueryで実装します。

htmlのコードは下記になります。
class=”hover_image”を付与したdivタグがリンクにするブロック要素です。aタグはpタグ内のテキストリンクでのみ使用しています。別ウィンドウで開くリンクのaタグには、target=”_blank”を設定します。

<div class="hover_image_wrap">
	<div class="hover_image">
		<div><img src="hover01.jpg" alt=""></div>
		<p class="caption_txt">
			<a href="https://tech.brick-plan.jp/category/fade/">ブロック要素（divタグ）全体がリンク領域になっています。</a>
		</p>
	</div>
	<div class="hover_image">
		<div><img src="hover02.jpg" alt=""></div>
		<p class="caption_txt">
			<a href="https://tech.brick-plan.jp/category/tab/">ブロック要素（divタグ）全体がリンク領域になっています。</a>
		</p>
	</div>
	<div class="hover_image">
		<div><img src="hover03.jpg" alt=""></div>
		<p class="caption_txt">
			<a href="https://tech.brick-plan.jp/category/modal/" target="_blank">ブロック要素（divタグ）全体がリンク領域になっています。<br>別ウィンドウで開きます。</a>
		</p>
	</div>
</div>

続いてCSSのコードです。
ブロック要素のマウスオーバー時にリンクだと認識できるように、カーソルの形状、ブロック要素の背景色、画像の透明度を操作します。

.hover_image_wrap {
	display: flex;
	justify-content: space-between;
}
.hover_image {
	width: 32%;
	border: 1px solid #dddddd;
}
.hover_image:hover {
	background: #dcf5f9;
	cursor: pointer;
}
.hover_image:hover img {
	opacity: 0.7;
}
.caption_txt {
	padding: 10px;
}
@media screen and (max-width: 480px) {
	.hover_image_wrap {
		flex-direction: column;
	}
	.hover_image {
		width: 100%;
		margin: 0 0 1em;
	}
	.hover_image:last-child {
		margin: 0;
	}
}

最後にjQueryのコードです。
ブロック要素クリック時の処理になります。findでブロック要素の孫要素であるaタグのtarget属性を調べ、_blankがある場合とない場合で処理を分岐します。ある場合はwindow.openでaタグのhref属性を別ウィンドウで開きます。ない場合はaタグのhref属性をwindow.location.hrefに代入することで、同一ウィンドウでのリンクの動作を実現します。

$(function() {
	$(".hover_image").click(function(){
		if($(this).find("a").attr("target") == "_blank"){
			window.open($(this).find("a").attr("href"));
		}else{
			window.location.href = $(this).find("a").attr("href");
		}
	});
});