使用圖片精靈，Firefox和Chrome之間的CSS按鈕懸停問題

翻轉對常規和懸停狀態都使用單個圖像。 Firefox和Chrome中的按鈕都顯示正常，但翻轉功能在Firefox中不起作用。使用圖片精靈，Firefox和Chrome之間的CSS按鈕懸停問題

這裏的HTML，它使用多個按鈕的列表（只需一個按鈕，這裏顯示的單個實例）：

<div id="buttons"> 
    <ul class="stencil_buttons"> 
     <li> 
     <button type="submit" id='addField'> 
      <a class="global_button" href=""><span>Button Text</span></a> 
     </button> 
    </li> 
    </ul> 
</div>

這裏的CSS：提前

a.global_button span { 
    background: transparent url('../images/button_left.png') no-repeat 0 0; 
    display: block; 
    line-height: 22px; 
    padding: 3px 0 5px 18px; 
    color: #fff; 
} 

a.global_button { 
    background: transparent url('../images/button_right.png') no-repeat top right; 
    display: block; 
    float: left; 
    height: 30px; 
    margin-right: 6px; 
    padding-right: 20px; 
    text-decoration: none; 
    font-size: 14px; 
} 

a.global_button:hover span { 
    background-position: 0 -30px; color: #fff; 
} 

a.global_button:hover { 
    background-position: right -30px; 
}

謝謝你的幫助。

來源

2011-06-16 David

嘗試button:hover a.global_button span和button:hover a.global_button而不是上面的相應選擇器。雖然上述問題中的選擇器在FF中工作時，周圍的元素不是button，但它們在此時不起作用;我的猜測是懸停狀態停在按鈕處，並且不會過濾到FF中的子元素。

來源

2011-06-17 00:22:58

謝謝邁克爾 - 我嘗試過，但它似乎刪除圖像，直到你把它懸停在它。將鼠標懸停在其上，只會顯示範圍文本，而不是圖像。然後，當你將鼠標懸停在它上面時，它會給你一張圖像，但不是正確的懸停圖像。 – David 2011-06-17 00:55:31

其已知錯誤/問題：https：//bugzilla.mozilla.org/show_bug.cgi？id = 843003 – Sprintstar 2013-10-24 13:47:37

回答

相關問題