圖片作爲<input type =「button」/>的值

Question

control-buttnos的界面在默認瀏覽器的樣式上發佈。我嘗試使用非標準的按鈕（）的圖像作爲值

HTML：

<div id="control-play" class="button"><span></span><input type="button" value=""/></div> 

CSS：

#control-play span {background-image: url('../i/ruler/play.png'); margin: 16px 0 0 18px; position: absolute; width: 16px; height: 16px;} 

但是，當然，我得到了一個問題：懸停時，光標懸停事件圖片：

在JS我可以激活點擊b Ÿ捕捉圖像的onClick：

$('#control-play span').click(function(){$(this).parent().find('input').click();}) 

但我不能這樣做，對onHover選項事件。如你所見，我不會模仿：hover {}和：active（）樣式，我使用默認樣式。我可以抓取圖像並將它們用作背景，但它似乎不是一種很好的風格。

那麼，同事們有什麼想法？歡迎任何jQuery，CSS3或HTML5。

UPD：我提到它很小心，但大多數答案建議切換按鈕的整個背景。注：我使用瀏覽器樣式的按鈕，我只是嘗試使用16x16圖標代替文本標籤。

Answer 1

最合適的解決辦法是使用HTML5 <button>...</button>代替<input type=button value=""/>

HTML：

<button type="button" id="control-play" title="Play"><span></span></button> 

CSS：

button#control-play {width: 50px; height: 49px;} 
button#control-play span {display: inline-block; background: url('../i/ruler/play.png') no-repeat;} 

有不需要精靈，3個模仿標準瀏覽器的背景按鈕的機會。每個人都會以最喜歡的風格使用這些按鈕（即使是使用皮膚瀏覽器），只有我的圖標纔是永久的。

通過Pointy的評論。

Answer 2

<div class="button"> 
//height and width of this DIV should be same as `input[button]` 
    <input type="button" /> 
</div> 

<style> 
.button{ 
    background: url("your_normal_image.jpg") no-repeat 0 0; 
    height: 123px; 
    width: 123px; 
    } 
.button:hover, .button.some_class{ 
    background: url("your_hover_image.jpg") no-repeat 0 0; 
    } 
.button input[type="button"]{ 
    opacity: 0;} 

</style> 

而點擊事件添加.some_class與使用jQuery .button - 代碼看起來像

<div class="button some_class"> 
    //toggle between ".some_class" 

     <input type="button" /> 
    </div> 

另一種方式 - 玩風格background-position:而不是使用圖片組合方法

要加入.someclass類知道更多：看看Image spriting文章

Answer 3

如果我理解正確...你想要使用精靈。精靈是背景圖像，在一張圖像中同時擁有Hover BG和Standard BG。在這種情況下，這兩個16像素x 16像素圖像將在一個圖像文件中，總寬度爲32像素x 16像素;

然後，您可以使用CSS切換背景位置，只需使用CSS創建平滑懸停效果。

#control-play span 
{ 
    background-image: url('../i/ruler/play.png'); 
    width:16px; 
    height:16px; 
    background-position: 16px 0px; 
} 

#control-play span:hover 
{ 
    background-position: -16px 0px; 
} 

Answer 4

我想說的最語義的方法是有：

HTML：

<input type="button" class="button" value="Submit" />

OR

<button type="submit" class="button">Submit</button>

CSS：

.button { 
display: block; 
width: 16px; 
height: 16px; 
background: url('../i/ruler/play.png') top left; 
border: 0; 
} 

.button:hover { 
background-position: bottom; 
cursor: pointer; 
} 

這樣，你不必依靠任何JavaScript語言（Javascript也被關閉..）

Answer 5

你有工作得非常好
注3個CSS操作： ！重要將迫使背景給予這部分更高的優先級

<style> 
.button{ 
    background: url("background.png") no-repeat 0 0; 
    height: 123px; 
    width: 123px; 
    border:0; // this part is important otherwise it leaves the borders 
    } 
.button:hover{ 
    background: url("background.png") no-repeat -123px 0 !important ; 
    } //moves the bg image up 
.button:active{ 
    background: url("background.png") no-repeat -246px 0 !important ; 
    } //move the bg up more when yu push the button 
</style> 

爲beginers改變你可以使用3個SAPARATE圖像至極將導致交運集團在第一懸停或oading延遲點擊：

<style> 
.button{ 
    background: url("background.png") no-repeat 0 0; 
    height: 123px; 
    width: 123px; 
    border:0; // this part is important otherwise it leaves the borders 
    } 
.button:hover{background: url("background1.png") no-repeat 0 0 !important;} 
.button:active{background: url("background2.png") no-repeat -246px 0 !important ;} 
</style>