2

<img />次の構造のリンクがあります。タグを非表示にしてマウスオーバーでフェードインするには、jQuery/css がどうあるべきかを知りたいです。

ここでの考え方は、HTML の <img> が非表示になり、マウスオーバーでフェードインしてスムーズな効果を提供するというものです。

一方、CSS の背景が最初に表示されます。

HTML:

<div id="nav">

<a href="何とか" id="id1">

<img src="hoverimg.png" alt="リンク テキスト 1" /> <span> リンク テキスト 1 </span> </a>

<img src="hoverimg2.png" alt="リンク テキスト 2" /> <span> リンク テキスト 2 </span> </a>

</div>

CSS:

#nav a span{
  display: none; /* Hide the text reader title */
}

#nav a {
  display: block;
  height: 200px;
  width: 250px;
  background url("bgimage.png"); /* I would ideally use the # selector for individual links.. */
}

#nav a img{
  /* what goes here so that jQuery works and so that we can backwards compatibility a:hover effect? */
}

jQuery:

???

余談ですが、ターゲット要素が数レベルの深さでネストされた子ノードである場合、jQuery はアニメーションを複数回実行することに気付きました。これを止める方法はありますか？

4

1 に答える 1

5

style="display: none;"画像の html に属性を追加するだけで、これを使用できます。

       $("#nav").hover(
            function() {
                $("img", this).show();
            },
            function() {
                $("img", this).hide();
            });

(表示/非表示が必要でない場合は、必要に応じて効果を変更します)

于 2010-03-10T04:37:17.860 に答える