よくありがちなことなんだが、基本に帰ろうキャンペーン。
回線の早い環境と、キャッシュに残ったまま確認してしまっていると陥る罠。
というか、ローンチが朝9時に迫っているのに、今更思い出して対策してなかったと絶賛後悔中。

サイトを見ていると、たまにマウスオーバーで一瞬消えることがある。
これは以下の件で回避できるっていう話。

【HTML】
<ul>
<li class="nav1"><a href=""><img src="nav1_off.gif" alt="menu1" /></a></li>
<li class="nav2"><a href=""><img src="nav2_off.gif" alt="menu2" /></a></li>
</ul>

【CSS】
ul li { float:left;} /*横にならべる時ね*/
ul li a { display:block; width:140px; height:30px;} /*ナビゲーションの大きさ*/

ul li.nav1,　/*ここ重要*/
ul li.nav1 a:hover { background:url(nav1_on.gif);}

ul li.nav2,　/*ここも重要*/
ul li.nav2 a:hover { background:url(nav2_on.gif);}

ul li a:hover img { visibility:hidden;}

<li>のbackground にもon画像を入れ、マウスオーバー時にHTML上にある<img>を visibility:hidden;で隠す。すると、liに指定されてあるon画像が現れる。

:hover の場合マウスオーバーした瞬間にそこから画像を読むので、一瞬ボタンが消える。
<li>に入れておけば画像は既にキャッシュされているので一瞬真っ白になるのを防ぐ役割だ。

サイト制作をしていると、何度も何度も確認の繰り返しになり、
このあたり一度キャッシュされると気がつきにくいものでもある。

実際初めて見る人には、ひっかかる部分だったりして、
そこから気がつくことも少なくないだろう。
こんな小技にも気を利かせることができれば、
フロントエンドでの高速化に繋がるんじゃないかな。
実際、httpリクエストをなるべく減らして行きたいし。