如何創建提交按鈕鼠標懸停？

我正在創建一個使用標準圖像作爲提交按鈕的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精靈的mouseovers，但它們不適用於提交按鈕。我希望得到一些幫助。

謝謝！

來源

2010-07-05 fmz

純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精靈技術。

來源

2010-07-05 14:17:41 kennytm

比腳本好得多。酷站點，jsbin btw – mplungjan 2010-07-05 14:24:45

http://stackoverflow.com/questions/195632/how-to-change-input-button-image-using-css – mplungjan 2010-07-05 14:26:24

你可以用幾種方法做到這一點......用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'"/>

只是從我的頭頂，我想這應該工作。

BR，保羅

來源

2010-07-05 14:04:46

極不可能，也沒有必要的javascript：除非有VBScript中的頁面上的第一個腳本 – mplungjan 2010-07-05 14:06:06

討厭鬼，它的實際工作中FF3.6， IE8，Chrome和Safar我在Windows上。我的歉意 – mplungjan 2010-07-05 14:10:32

完美的作品。謝謝。 – fmz 2010-07-05 14:10:47

老校友：

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

來源

2010-07-05 14:05:05 mplungjan

那豈不是可以使用的一類？

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

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

或者你可以使用然後一點點的JavaScript來處理圖像的交換，並導致按鈕來調用提交（）（JavaScript的：document.theform.submit（））

來源

2010-07-05 14:06:06

基本上這是你會怎樣做：

HTML標記：

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

注：創建CSS的ID。在「Value」中，輸入 （空格的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;  
     }

注：寬度和高度應該是圖像的寬度和高度。然後添加邊框：無;刪除出現的默認邊框。

希望這有助於！比上述任何答案簡單得多。

來源

2013-05-02 23:12:20 Mitch

經典解決方案（類似於米奇的上面）：

在表單的HTML，添加一個「階級」：

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

對於CSS，使懸停改變文字顏色（加「寬：」和‘高度：’行，如果你需要）

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

來源

2016-02-13 17:06:46

如何創建提交按鈕鼠標懸停？

回答

相關問題