我正在创建一个 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 sprite 的鼠标悬停,但它们不适用于提交按钮。我会很感激一些帮助。
谢谢!
最佳答案
使用纯 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 Sprite 技术。
关于javascript - 如何创建提交按钮鼠标悬停?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/3180057/