,

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

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

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

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

“`html

  • #
  • #
  • #
  • #
  • #
  • #
  • #
  • #

“`

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

“`css
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 などの例。

> * [CSSで気をつけたい事やつまづいたときのちょっとしたコード](http://webdesignrecipes.com/css-reference/)
> * [Sassの@eachで同じスタイルをラクチンに管理をする方法 | 株式会社LIG](http://liginc.co.jp/web/html-css/html/83759)
[/markdown]