Question

我有一个自定义（IE我在互联网上找到它）PayPal捐赠按钮。我希望它有2个不同的图像 - 鼠标图像和鼠标悬停图像。我改变了

<input type="image" src='/images/icons/donate.png' border="0" name="submit" alt="">

到

<input type="image" onmouseout="this.src='/images/icons/donate.png'" onmouseover="this.src='/images/icons/hover_donate.png'" border="0" name="submit" alt="">

两个不同的图像正常工作，但是，当页面最初加载时，直到我鼠标移动至少一次才会出现图像。在那之后，他们发现，它的工作原理应该如何。我想知道是否有办法解决这个问题，最好是用CSS。这是我正在谈论的完整代码部分（减去识别信息），以及我正在谈论的图像（或链接，相反，因为我没有代表发布图像）。

            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="valueHere">
            <input type="image" onmouseover="this.src='/images/icons/hover_donate.png'" onmouseout="this.src='/images/icons/donate.png'" border="0" name="submit" alt="PayPa$
            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
            </form>

Image

最重要的一个是我在新页面上看到的（使用ctrl + f5，确保它从服务器而不是我的缓存中拉出来），底部分别是按钮和悬停按钮。

Answer 1

在输入字段上输入id并为其提供背景图像（您希望在默认情况下显示的图像而不悬停）

<style type="text/css">
   #donation{background-image:url(images/icons/donate.png);}
</style>

<input type="image" id="donation" onmouseout="this.src='/images/icons/donate.png'" onmouseover="this.src='/images/icons/hover_donate.png'" border="0" name="submit" alt=""> And

输入标记内的不同mouseover和mouseout图像

1 个答案: