如何创建一个提交按钮的鼠标悬停效果？

Question

我将创建一个使用标准图像作为提交按钮的HTML联系表单。 以下是HTML代码：

<form action="#">
    <fieldset>
        <input type="text" name="name" value="FULL NAME" onfocus="if (this.value=='FULL NAME') this.value='';"/>
        <input type="text" name="" value="PHONE NUMBER" onfocus="if (this.value=='PHONE NUMBER') this.value='';"/>
        <input type="text" name="" value="EMAIL" onfocus="if (this.value=='EMAIL') this.value='';"/>
        <input type="text" name="" value="MOVE DATE" onfocus="if (this.value=='MOVE DATE') this.value='';"/>
        <input type="text" name="" value="ORIGINATING ADDRESS" onfocus="if (this.value=='ORIGINATING ADDRESS') this.value='';"/>
        <input type="text" name="" value="DESTINATION ADDRESS" onfocus="if (this.value=='DESTINATION ADDRESS') this.value='';"/>
        <select name="type">
            <option value="Private">Private</option>
            <option value="Commercial">Commercial</option>
        </select>
        <input id="quoteSubmit" type="image" src="_images/btn_submit.png" alt="" />
    </fieldset>
</form>

静态提交按钮图像还可以，但是我希望在鼠标悬停时将其更改为btn_submit-over.png。

我熟悉使用css精灵的鼠标悬停，但它们不适用于提交按钮。我需要一些帮助。

谢谢！

- forrest

Answer 1

使用纯CSS，

<input type="submit" value="::Submit Query::" id="foo" />

...

  #foo {
    background-image: url('_images/btn_submit.png');
    width: <width here>;
    height: <height here>;
    border-style: none;
    background-color: transparent;
    text-indent: 480px;    /* hack to hide the text */
  }

  #foo:hover {
    background-image: url('_images/btn_submit-over.png')
  }

如果CSS被禁用，它将恢复为一个简单的提交按钮。

演示：http://jsbin.com/aboxu3/2 然后，您可以应用CSS精灵技术。

- kennytm

---

比脚本好看多了。很酷的网站，顺便提一下，jsbin。 - mplungjan

https://dev59.com/GXVC5IYBdhLWcg3wvT_g - mplungjan

Answer 2

经典解决方案（类似于Mitch上面的解决方案）：

对于FORM中的HTML，添加一个'class'属性：

<INPUT NAME="submit" class="submit" TYPE="submit" VALUE="Submit">   

对于CSS，当鼠标悬停时更改文本颜色（如果需要，请添加'width:'和'height:'行）

.submit {
text-decoration: none;
text-align: center;
border: 1px solid black;
background-color: #cccccc;
-moz-border-radius: 5px; /* I hate square buttons for mozilla*/
border-radius: 5px; /* I hate square buttons for everybody else*/
font-family: Arial,Helvetic1,Geneva,Swiss,SunSans-Regular;
font-size: 18px;
color: #0000aa; /* font is blue */
}

.submit:hover {
color: #ff0000; /* font changes to RED on hover) */
}

- Art Bibbs

Answer 3

您可以通过几种方式来实现这个功能，使用jQuery可能是最好的方法，但以下是不使用jQuery的方法。

将代码中的 <input id="quoteSubmit" type="image" src="_images/btn_submit.png" alt="" /> 改为 <input id="quoteSubmit" type="image" src="_images/btn_submit.png" alt="" onmouseover="javascript:this.src='_images/btn_submit-over.png'" onmouseout="javascript:this.src='_images/btn_submit.png'"/> 这样做应该可以达到您的目的。

祝好， Paul

- Paul Peelen

---

极不可能，也没有必要使用JavaScript：除非页面上有VBScript作为第一个脚本。 - mplungjan

该死，它在Windows的FF3.6、IE8、Chrome和Safari上实际上都能正常工作。我很抱歉。 - mplungjan

@Paul：事件处理程序中不应该有 javascript:。 - kennytm

@KennyTM：说得对，但是……它也不会有什么影响。它能够在有或者没有的情况下都正常工作。 - Paul Peelen

Answer 4

老派：

        <a href="#" onclick="document.forms[0].submit(); return false"
onmouseover="document.subBut.src=document.subBut.src.replace('.png','over.png')"
onmouseout="document.subBut.src=document.subBut.src.replace('over.png','.png')"><img 
name="subBut" src="_images/btn_submit.png" alt="" border="0" /></a>

- mplungjan

Answer 5

能不能使用一个类呢？

<input type="submit" class="submit" .../>

CSS:
input.submit:hover{
   color: Green;
} 

或者你可以使用一些JavaScript来处理图像的交换并使按钮调用submit()（javascript：document.theform.submit()）

- Daniel Frear

Answer 6

基本上这是你要做的事情：

HTML标记：

<input type="submit" name="Submit" id="submit" value="&nbsp;" />

注：为CSS创建一个ID。在“值”中放置 （表示空格的HTML标记），这将使默认的“值”为空白。

CSS标记：

#submit {
width: 220px; 
height: 50px;
border: none;
background: url("images/submit.jpg") no-repeat; 
}
        #submit:focus {
        background: url("images/submit_over.jpg") no-repeat;    
        }

注意：宽度和高度应该是你的图片的宽度和高度。然后添加border: none;以去除默认的边框。希望这能够帮助你！比上面任何答案都要简单得多。

- Mitch