表單提交按鈕懸停效果不顯示

Question

我有一個表單提交按鈕。我使用精靈作爲背景，然後將鼠標懸停在我的按鈕寬度上以獲得懸停效果。但是，這不起作用。

這是我的html：

<form class="a"> 
<All the other Fields...> 
<p><input type="submit" value="Submit"/><p> 
</form> 

而且我的CSS：

.a input[type="submit"] { 
    margin-top: 15px; 
    background: url(btn.png) no-repeat; 
    width: 108px; 
    height: 42px; 
    border: none; 
    color: transparent; 
    font-size: 0; 
} 

.a input[type="submit"]:hover { 
    background: url(btn.png) no-repeat 109 0; 
} 

Answer 1

.a input[type="submit"]:hover { 
    background: url('btn.png') no-repeat 109px 0px; /*use 109px */ 
} 

並檢查您的背景圖像路徑。

Answer 2

你錯過了你的位置px。見this fiddle的工作示例

Answer 3

背景位置：for x: %|px|left|center|right和for y %|px|top|center|bottom

這可能是

.a input[type="submit"]:hover { 
    background: url(btn.png) no-repeat; 
    background-position: 109px 0px; // left 109px, top 0px 
} 

或者

.a input[type="submit"]:hover { 
    background: url(btn.png) no-repeat 109px 0px; 
} 

另外，還要確保你的image路徑是正確的。根據url(btn.png)，現在您的圖片應該位於您的css所在的文件夾中。