,

[HTML & CSS General] CSS: 画像ナビゲーションのマウスオーバー処理を visibility: hidden と Sass の @for で作る

公開日: 2014/06/27
更新日: 2018/11/15

CSS が面倒なので @for で繰り返し書かなくてもすむようにする。

こんな感じでナビゲーションを用意。

<ul class="globalnav">
  <li class="globalnav-1"><a href="#"><img src="/img/globalnav/globalnav-1.png" alt="#"></a></li>
  <li class="globalnav-2"><a href="#"><img src="/img/globalnav/globalnav-2.png" alt="#"></a></li>
  <li class="globalnav-3"><a href="#"><img src="/img/globalnav/globalnav-3.png" alt="#"></a></li>
  <li class="globalnav-4"><a href="#"><img src="/img/globalnav/globalnav-4.png" alt="#"></a></li>
  <li class="globalnav-5"><a href="#"><img src="/img/globalnav/globalnav-5.png" alt="#"></a></li>
  <li class="globalnav-6"><a href="#"><img src="/img/globalnav/globalnav-6.png" alt="#"></a></li>
  <li class="globalnav-7"><a href="#"><img src="/img/globalnav/globalnav-7.png" alt="#"></a></li>
  <li class="globalnav-8"><a href="#"><img src="/img/globalnav/globalnav-8.png" alt="#"></a></li>
</ul>

CSS で背景にマウスオーバー時の画像を置いて、visibility: hidden で上記の画像を隠す。
のだけれども、数が増えると大変なので Sass の繰り返し構文 @for を使う。
（絶対配置の例）

ul.globalnav {
  li {
    position: absolute;
  }
  .globalnav-1 { top: 220px; left: 184px; }
  .globalnav-2 { top: 220px; left: 136px; }
  .globalnav-3 { top: 220px; left:  86px; }
  .globalnav-4 { top: 220px; left:  34px; }
  .globalnav-5 { top: 410px; left: 184px; }
  .globalnav-6 { top: 410px; left: 136px; }
  .globalnav-7 { top: 410px; left:  86px; }
  .globalnav-8 { top: 440px; left:  14px; }
  @for $i from 1 through 7 {
    .globalnav-#{$i} a {
      display: block;
      background: url(/img/globalnav/globalnav-#{$i}-on.png) no-repeat left top;
      &:hover img { visibility: hidden; }
    }
  }
}

through は、7 まで。
to とすると、6 までとなる。

補遺

CSS スプライトや @each などの例。