滚动形式

Question

我有一个导航栏在我们的挂起的网站由样式超链接。

其中之一最初是一个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"); }