【HTML,CSS,JQuery】ブログ機能などの一覧でリンク先や詳細ページがないときにアニメーションを止める。

よく使うので忘備録として・・

パターン１

一番シンプルなやつ
＃は環境に応じて使い分ける。

<ul class="blog-list">
  <li><a href="pathToTheBlog">ブログ始めました。</a></li>
  <li><a href="pathToTheBlog">詳細ページあります</a></li>
  <li><a href="#">詳細ページないです。</a></li>
</ul>

.blog-list {
  >li >a[href="#"] {
    pointer-events: none;
  }
}

パターン２

一番ありがちなやつ

<ul class="blog-list">
  <li>
    <a href="pathToTheBlog"><!-- 透明なアンカータグを要素全体の上に配置 --></a>
    <div class="img-wrap" style="background: url(pathToDefaultImg) no-repeat center/cover">
      <img src="pathToImg" alt="ユーザー投稿した画像です。">
    </div>
    <div class="txt-wrap">
      <p>テキスト入ります。</p>
    </div>
  </li>
  <li>
    <a href="#"><!--  --></a>
    <div class="img-wrap" style="background: url(pathToDefaultImg) no-repeat center/cover">
      <img src="pathToImg" alt="ユーザー投稿した画像です。">
    </div>
    <div class="txt-wrap">
      <p>テキスト入ります。</p>
    </div>
  </li>
</ul>

$(function() {
  $('.blog-list > li').each(function(){
    if ($(this).children('a').attr('href') == '#') {
      $(this).css('pointer-events', 'none');
    }
  });
});

.news-list {
  display: flex;
  justify-content: space-around;
  width: calc(100% + 15px);
  >li {
    width: calc(50% - 15px);
    margin-right: 15px;
    position: relative;

    >a {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .img-wrap {
      overflow: hidden;
      height: 200px;
      width: 100%;

       >img {
         height: 100%;
         width: 100%;
         object-fit: cover;
         transition: .3s transform;
       }
     }

     .txt-wrap {
       font-size: 16px
     }

     &:hover {
        .img-wrap {
          transform: scale(1.05);
        }
        .txt-wrap p {
          text-decoration: underline;
        }
     }
  }
}