悬停时图像变化？ [复制]

Posted 2023-03-06

【中文标题】悬停时图像变化？ [复制]

【英文标题】：Image change when hovered over? [duplicate]

【发布时间】：2012-08-14 13:53:44

【问题描述】：

可能重复：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"   />
                </a>
                <a href="img/pic2_b.jpg" rel="gallery" title="Tree Under Attack">
                    <img src="img/pic2_s.jpg" class="fancy_thumb"   />
                </a>
                <a href="img/pic3_b.jpg" id="pic3" rel="gallery" title="World Map">
                    <img src="img/pic3_s.jpg" class="fancy_thumb"   />
                </a>
                <a href="img/pic4_b.jpg" rel="gallery" title="Combo Attack">
                    <img src="img/pic4_s.jpg" class="fancy_thumb"   />
                </a>
                <a href="img/pic5_b.jpg" rel="gallery" title="Robots Strike">
                    <img src="img/pic5_s.jpg" class="fancy_thumb"   />
                </a>
                <a href="img/pic6_b.jpg" rel="gallery" title="Back Stab">
                    <img src="img/pic6_s.jpg" class="fancy_thumb"   />
                </a>
                <a href="img/pic7_b.jpg" rel="gallery" title="Critical Hit">
                    <img src="img/pic7_s.jpg" class="fancy_thumb"   />
                </a>
                <a href="img/pic8_b.jpg" rel="gallery" title="All Out War">
                    <img src="img/pic8_s.jpg" class="fancy_thumb"   />
                </a>
                <a href="img/pic9_b.jpg" rel="gallery" title="Air Defense">
                    <img src="img/pic9_s.jpg" class="fancy_thumb"   />
                </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>

【参考方案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);