Question

可能重复：
change image on mouseover

任何人都可以告诉我如何在下面的代码中获取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>

Answer 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);
}

悬停时图像会发生变化吗？

1 个答案: