Question

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

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

问题是我应用于链接的悬停图像交换效果不适用于表单图像。我已经尝试了所有的方式（this.src到the.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>

Thankee！戴夫

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"); }

表格中的滚动

1 个答案: