如何更改鼠标悬停时的图像按钮

Question

我想在鼠标悬停时将图像按钮从绿色更改为黄色。

这是我的 CSS 代码

 a#try-it-button {
    width:273px;
    height:47px;
    margin-left:25px;
    margin-top:372px;
    background:url(../image/try-it-green.png);

}
a#try-it-button:hover {
        width:273px;
    height:47px;
    margin-left:25px;
    margin-top:372px;
    background:url(../image/try-it-orange.png);
}
a.alt { display: none; }

我的 html 代码

<div id="y-moringa">


<a id="try-it-button" href="#"><span class="alt"></span></a>

</div>

提前致谢。

Answer 1

将 float: left 或 display: inline-block 或 display: block 添加到 a#try-it-button 。

您想要哪一种实际上取决于您想要的布局。

您无需复制 :hover 上的所有属性（新的 背景 除外）。

您实际上应该在这里做的是使用 "CSS Sprites"（有很多好处），并调整 :hover 上的 background-position。

Answer 2

未经测试，但尝试一下：

a#try-it-button {
    width:273px;
    height:47px;
    margin-left:25px;
    margin-top:372px;
    display:block; // <-- **I added this**
    background:url(../image/try-it-green.png);

}
a#try-it-button:hover {
    background:url(../image/try-it-orange.png);
}