ブロック要素をクリックでリンクの動作になります。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");
}
});
});