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上的所有属性（新background除外）。

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

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

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

2 个答案: