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

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

Answer 2

你可以用几种方式做到这一点...... 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'"/>

从我的头脑中，我想这应该工作。

保罗

Answer 3

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

对于FORM中的HTML，添加一个“类”：

<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) */
}

Answer 4

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

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; 删除出现的默认边框。

希望这可以帮助！ 比任何上述答案简单得多。

Answer 5

老套：

        <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>

Answer 6

是不是可以使用课程？

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

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

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