Javascript 如何创建提交按钮鼠标悬停？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3180057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I create a Submit button mouseover?
提问by forrest
I am creating an HTML contact form that uses a standard image for a submit button.
我正在创建一个 HTML 联系表单，它使用标准图像作为提交按钮。
Here is the 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>
The static Submit button image is okay, but I would like change it on mouseover to btn_submit-over.png.
静态提交按钮图像没问题，但我想在鼠标悬停时将其更改为 btn_submit-over.png。
I am familiar with mouseovers useing css sprites, but they don't work for submit buttons. I would appreciate some help.
我熟悉使用 css sprite 的鼠标悬停，但它们不适用于提交按钮。我会很感激一些帮助。
Thanks!
谢谢！
回答by kennytm
With pure CSS,
使用纯 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')
}
If CSS is disabled it will revert to a simple submit button.
如果禁用 CSS，它将恢复为简单的提交按钮。
Demonstration: http://jsbin.com/aboxu3/2
You could then apply the CSS sprite techniques.
然后，您可以应用 CSS 精灵技术。
回答by Art Bibbs
Classic solution (similar to Mitch's above):
经典解决方案（类似于上面的米奇）：
For the HTML in the FORM, add a 'class':
对于 FORM 中的 HTML，添加一个“类”：
<INPUT NAME="submit" class="submit" TYPE="submit" VALUE="Submit">
For the CSS, make hover change text color (add 'width:' and 'height:' lines if you need to)
对于 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) */
}
回答by Paul Peelen
You can do this several ways... with jquery might be the best way, but this is how you do it without.
你可以通过几种方式做到这一点......使用 jquery 可能是最好的方式，但这是你没有的方式。
Change <input id="quoteSubmit" type="image" src="_images/btn_submit.png" alt="" />
改变 <input id="quoteSubmit" type="image" src="_images/btn_submit.png" alt="" />
to <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'"/>
到 <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'"/>
Just from the top of my head, I guess that should work.
只是从我的头顶来看，我想这应该有效。
Br, Paul
兄弟，保罗
回答by mplungjan
OldSchool:
老套：
<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>
回答by Daniel Frear
Wouldn't it be possible to use a class?
难道不能使用类吗？
<input type="submit" class="submit" .../>
CSS:
input.submit:hover{
color: Green;
}
or you could use then a little JavaScript to handle the swapping of images and to cause the button to call submit() (javascript:document.theform.submit())
或者你可以使用一点 JavaScript 来处理图像的交换并导致按钮调用 submit() (javascript:document.theform.submit())
回答by Mitch
Basically this is what are you going to do:
基本上这是你要做的：
HTML Markup:
HTML 标记：
<input type="submit" name="Submit" id="submit" value=" " />
Notes: Create an ID for the CSS. In the "Value", put (the html markup for a blank space) and this will make the default "value" blank.
注意：为 CSS 创建一个 ID。在“值”中，放置 （空白区域的 html 标记），这将使默认“值”为空白。
CSS Markup:
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;
}
Notes: The width and height should be the width and height of your image. Then add border: none; to remove the default border that appears.
注意：宽度和高度应该是图像的宽度和高度。然后添加边框：无；删除出现的默认边框。
Hope this helps! Much simpler than any of the above answers.
希望这可以帮助！比以上任何一个答案都简单得多。
