｜ ｜ ｜ ｜

マウスオーバーを印象的にするとリンクが注目されクリックされやすくなるかもしれません。
jQueryプラグインのAnimated Hoverでは、マウスオーバーのタイミングでアニメーションを加えてくれます。

使用方法
Animated Hoverからjquery.ahover.jsをDimensionsからjquery.dimensions.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<script type="text/javascript" src="jquery.ahover.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$('ul li').ahover();
});
</script>

上記ではメニューを想定し、ulのli要素に対してマウスオーバーを適用しています。
さらにCSSを記述します。
<style>
ul {list-style-type: none;position: relative;}
ul li {position: relative;z-index: 200;padding: 0 0.5em;line-height: 1.5;float: left;}
ul div.ahover {background: #ffb;padding-bottom: 10px;position:absolute;} /* ここの背景で色を変更可能です */
</style>

あとは普段通りメニューを記述すれば完成です。
<ul> <li><a href="http://www.skuare.net/">Top page</a></li>
<li><a href="http://www.skuare.net/test/index.html">JavaScript Library Samples</a></li>
<li><a href="http://www.skuare.net/test/jQuery.html">jQuery Plugin Samples</a></li>
</ul>

マウスオーバーをかっこよく見せるJavaScript「Animated Hover」サンプル
※IEでは、DOCTYPEをstrictにしないと機能しないようです。
Commented by 10th543

記事作成：2009年08月11日