更改 hover 上的 Paypal 捐赠按钮

Question

I made a Paypal donation button at the PayPal page with a custom image. Is there any chance that the image changes the color or different image on hover?

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
  <input type="hidden" name="cmd" value="_s-xclick" />
  <input type="hidden" name="hosted_button_id" value="RX3MLKWPQBLSN" />
  <input type="image" src="https://domain.sk/paypal2.png" border="0" name="submit" title="PayPal - The 
safer, easier way to pay online!" alt="Donate with PayPal button" />
  <img alt="" border="0" src="https://www.paypal.com/en_SK/i/scr/pixel.gif" width="1" height="1" />
</form>

Answer 1

The CSS method will only let you manipulate the image that you already have and is the method that will use the least resource.

.paypal_button:hover {
  filter: contrast(50%);
}

jQuery is a lot heavier, but using jQuery you can swap out the image using mouseover and mouseout. (I've used a placeholder image to show the example here). This will give you the most freedom in replacing the image source to whatever you want when someone hovers.

 $( ".paypal_button" ).mouseover(function() { $( this ).attr("src","https://dummyimage.com/qvga/000000"); }); $( ".paypal_button" ).mouseout(function() { $( this ).attr("src","https://dummyimage.com/qvga"); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="hosted_button_id" value="RX3MLKWPQBLSN" /> <input type="image" class="paypal_button" src="https://dummyimage.com/qvga" border="0" name="submit" title="PayPal - The safer, easier way to pay online:" alt="Donate with PayPal button" /> <img alt="" border="0" src="https.//www.paypal.com/en_SK/i/scr/pixel.gif" width="1" height="1" /> </form>