使用 CSS 更改悬停时的图像

【问题标题】：Image Change on Hover using CSS使用 CSS 更改悬停时的图像
【发布时间】：2013-04-10 15:28:45
【问题描述】：

这段代码有什么问题？我已经为此工作了几个小时，无法弄清楚为什么 button.png 现在会显示，但链接在“one” div 的位置..？

#one
{
position: fixed;
left:225px;
top:702px;
}

.button
{
display: block;
width: 40px;
height: 40px;
background: url('images/button.png') bottom;
text-indent: -99999px;
}

.button:hover
{
background-position: 0 0;
background-color: transparent; 
border-style: none;
}

<body>
    <div id="map">
        <img src="images/map.png"/>
    </div>

    <div id="one">
        <a class="button" href="images/one.jpg"/>
            <img src="images/button.png"/>
        </a> 
    </div>

</body>

【问题讨论】：

您的目标是什么？目前正在发生什么？
你为什么要设置链接的背景以及在链接中放置图像标签？看来您可以只使用背景图片（删除图片标签）。
您的 HTML 似乎无效，您已“双重关闭”锚标记。

标签： css image html button hover

【解决方案1】：

您的标题与您的问题并没有太大关系..所以我将尝试回答这个问题。

图像未显示，因为默认情况下 img 是内联元素，并且您已将 text-indent 设置为 -99999px。

您可以删除 text-indent 或将 img 的 display 设置为 block：

.button img { display: block; }

【讨论】：

这确实显示了图像，但现在会显示完整图像，而不仅仅是我希望的 40 x 40 像素。
.button img { display: block; width: 40px; height: 40px; } 如果你想调整图像的大小，如果你想显示它的一部分.. EricL 在下面说：
将“overflow:hidden”添加到你的链接css
这也有效，但现在悬停不起作用，它只是一个普通按钮。
您是否删除了 img 标签？您可能只是看到了这一点，因为您的 css 仅设置了背景..您的图像标签可能覆盖了背景