JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<!-- jsfiddleはbodyタグ書けないのでdivで代替 -->
<div class="vision">

  <nav class="gNav">
    <ol class="gNavList">
      <li class="gNavList__item">
        <a href="/" class="gNavLink gNavLink--home">ほーむ</a>
      </li>
      <li class="gNav-lisL_item">
        <a href="/vision/" class="gNavLink gNavLink--vision">びじょん</a>
      </li>
      <li class="gNavList__item">
        <a href="/product/" class="gNavLink gNavLink--product">せいひん</a>
      </li>
      <li class="gNavList__item">
        <a href="/recruit/" class="gNavLink gNavLink--recruit">さいよう</a>
      </li>
      <li class="gNav-listLitem">
        <a href="/contact/" class="gNavLink gNavLink--contact">おといあわせ</a>
      </li>
      <li class="gNav-listLitem">
        <a href="/company/" class="gNavLink gNavLink--company">わがしゃ</a>
      </li>
    </ol>
  </nav>

</div>

CSS

/* 見た目わかりやすく */
body{font-size:32px}
a:hover {color: tomato}
a:hover:after {content: ' ' attr(href)}

/*
bodyにつけたクラスと対応するナビの
マウスイベントを無効にする
*/
.home .gNavLink--home,
.vision .gNavLink--vision,
.product .gNavLink--product,
.recruit .gNavLink--recruit,
.contact .gNavLink--contact,
.company .gNavLink--company {
  pointer-events: none;
}