表格翻转

Question

我在我们的待定站点上有一个由样式化超链接组成的导航栏。

其中一个 href 最初是 PayPal 链接，但出于安全考虑，我不得不将此 PP 链接设为加密按钮。

问题是我应用于链接的悬停图像交换效果不适用于表单图像。我已经尝试了每一种方式（this.src 到 that.src，基于移动的背景位置悬停）来实现这一点，但是形式的复杂性与 href 的简单性证明是有问题的。

鉴于我下面的代码，任何人都可以向我展示一种非 Javascript 方式来移动“pp3.gif”的位置或交换其他两个图像以模仿我已经为其他列表元素提供的 css 悬停图像交换

    <li><a href="info.htm" target="iframe1">Information</a></li>
    <li>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
           <input type="hidden" name="cmd" value="_s-xclick">
           <input type="image" src="../buttons/pp3.gif" name="submit">
           <input type="hidden" name="encrypted" value="-----BEGIN PKCS7 ... END PKCS7-----">
       </form>
    </li>
    <li><a href="delivery.htm" target="iframe1">Livraison</a></li>

谢谢！ 戴夫

Answer 1

我建议不要使用<input type="image">。与直接使用 CSS 设置输入样式相比，它非常不灵活。试试这个：

http://jsfiddle.net/6S8Hs/

<ul>
<li><a href="info.htm" target="iframe1">Information</a></li>

<li>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_s-xclick"/>
        <input class="hover-effect" type="submit" name="submit"/>
        <input type="hidden" name="encrypted" value="-----BEGIN PKCS7 ... END PKCS7-----"/>
    </form>
</li>
<li><a href="delivery.htm" target="iframe1">Livraison</a></li></ul>

ul{ list-style-type: none; }

ul li{ display:inline; float:left; margin-left:10px; }

.hover-effect{ width:50px; height: 50px; background-image:url("http://a.deviantart.net/avatars/t/o/toaster-kitten.jpg"); display:block; border:none; color:transparent; }

.hover-effect:hover{ background-image:url("http://img.ehowcdn.com/other-people/ehow/images/a06/27/bh/care-newborn-kitten-mother-800x800.jpg"); }