html - 在透明背景下悬停时更改按钮的背景

Question

老实说，我认为标题非常清楚，所以我想要的是当用户将鼠标悬停在按钮上时，背景图像会发生变化。我没有使用特定的类，因为背景:透明搞砸了。

这是按钮的代码:

<button type="submit" style="border: 0; padding: 0px; margin-top: -1px; background: transparent">
    <img src="../images/login open.png" alt="Inloggen" width="130" height="29" />
</button>

感谢您的关注；)

Answer 1

您没有使用透明的 PNG 吗？您可以完全避免使用 background:transparent，而只需使用 button:hover 来更改背景。

HTML:

 <button type="submit"></button>

CSS:

 button {
 background:url(yourImage.png) no-repeat 0 0;
 height: 29px;
 width: 130px;
 border:none;
 }

 button:hover {
 background:url(yourImage.png) no-repeat 0 0;
 }

参见 http://jsfiddle.net/Hc5Dz/