-5

重複の可能性：
マウスオーバーで画像を変更

次のコードで pic1_s から pic9_s の画像を取得して、ホバーしたときに別の画像に変更する方法を誰か教えてもらえますか? 不透明度レイヤーで暗くされ、書き込みがある各画像の異なるバージョンがあります。それらにはすでに jquery ライトボックス効果とカルーセル効果があります。ここで見つけることができます: http://www.meanbeangames.com/ (メイン画像の下に 3 つ並んでいます)。

    <div class="image_carousel">
            <div id="foo2">
                <a href="img/pic1_b.jpg" rel="gallery" title="Death From Above">
                    <img src="img/pic1_s.jpg" class="fancy_thumb" width="320" height="198" />
                </a>
                <a href="img/pic2_b.jpg" rel="gallery" title="Tree Under Attack">
                    <img src="img/pic2_s.jpg" class="fancy_thumb" width="320" height="198" />
                </a>
                <a href="img/pic3_b.jpg" id="pic3" rel="gallery" title="World Map">
                    <img src="img/pic3_s.jpg" class="fancy_thumb" width="320" height="198" />
                </a>
                <a href="img/pic4_b.jpg" rel="gallery" title="Combo Attack">
                    <img src="img/pic4_s.jpg" class="fancy_thumb" width="320" height="198" />
                </a>
                <a href="img/pic5_b.jpg" rel="gallery" title="Robots Strike">
                    <img src="img/pic5_s.jpg" class="fancy_thumb" width="320" height="198" />
                </a>
                <a href="img/pic6_b.jpg" rel="gallery" title="Back Stab">
                    <img src="img/pic6_s.jpg" class="fancy_thumb" width="320" height="198" />
                </a>
                <a href="img/pic7_b.jpg" rel="gallery" title="Critical Hit">
                    <img src="img/pic7_s.jpg" class="fancy_thumb" width="320" height="198" />
                </a>
                <a href="img/pic8_b.jpg" rel="gallery" title="All Out War">
                    <img src="img/pic8_s.jpg" class="fancy_thumb" width="320" height="198" />
                </a>
                <a href="img/pic9_b.jpg" rel="gallery" title="Air Defense">
                    <img src="img/pic9_s.jpg" class="fancy_thumb" width="320" height="198" />
                </a>

            </div>

            <a class="prev" id="foo2_prev" href="#"><span>prev</span></a>

            <a class="next" id="foo2_next" href="#"><span>next</span></a>

        </div>
4

1 に答える 1

1

の背景画像として設定します<a>。

そして、ホバーでそれらを切り替えます。

a:link, a:visited {
  display: block;
  background: url(image-light.jpg) no-repeat 0 0;
  width: width of image;
  height: height of image;
}
a:hover, a:active, a:focus {
  background-image: url(image-dark.jpg);
}
于 2012-08-18T08:58:27.240 に答える