-5

可能重复：
鼠标悬停时更改图像

谁能告诉我如何在以下代码中将 pic1_s 转换为 pic9_s 图像，以便在它们悬停时更改为不同的图片？我有每张图片的不同版本，它们用不透明层变暗并有文字。他们已经有了 jquery 灯箱效果和轮播效果。可以在这里找到：http ://www.meanbeangames.com/ （主图下并列三张）。

    <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 回答