如何创建鼠标悬停的提交按钮？

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 sprites的mouseovers,但它们不适用于提交按钮.我将不胜感激.

谢谢!

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精灵技术.