私はウェブデザインが初めてです。今、履歴書を作っています。次のようなナビゲーション div があります。
<div id="nav" class="grid_12">
<div id="Home" class="grid_3">
<div class="button">
<a href="#">Home</a>
</div>
</div>
<div id="Life" class="grid_3">
<div class="button">
<a href="#">Life</a>
</div>
<img src="img/someimg.jpg">
</div>
<div id="Portfolio" class="grid_3">
<div class="button">
<a href="#">Portfolio</a>
</div>
</div>
<div id="Contact" class="grid_3">
<div class="button">
<a href="#">Home</a>
</div>
</div>
</div>
次に、ナビゲーション用のスクリプトがあります。
<script type="text/javascript>
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
</script>
誰かがボタンの上にマウスを置くと、その下に画像が表示されるようにしたいです。画像を適切に非表示にしていますが、fadeIn が機能していません。なぜ機能しないのかわかりません。