ページ表示時からオンマウスの動きを明示しておきたいときや、最初だけ目立たせたいときなどに使えるかと思います。
表示サンプルはこちら。
Javascript
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"> $(function(){ $(".item").mouseover(function(){ $(".item").removeClass('active'); }); }); </script>
サンプルのHTML
<div class="item"> <a href="#">A</a> </div> <div class="item active"> <a href="#">B</a> </div> <div class="item"> <a href="#">C</a> </div> <div class="item"> <a href="#">D</a> </div> <div class="item"> <a href="#">E</a> </div>
サンプルのCSS
.item { display:inline-block; font: 30px sans-serif; } .item a { display:block; width:30px; height:30px; line-height:30px; background:#000; color:#EEE; text-align:center; text-decoration:none; } .active a, .item a:hover { background:#ff9900; color:#fff; }