html - 使用透明背景更改悬停按钮的背景

Question

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

这是按钮的代码：

<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/