你如何讓JQuery Mobile的ui-icon活躍狀態？

Question

我正在使用JQuery mobile製作一個簡單的web應用程序。我在我的頁腳導航欄中使用自定義圖標。我想知道是否有可能爲圖標（而不是按鈕）進行活動和懸停狀態。這是我的HTML

<div data-role="footer" data-id="foo1" data-position="fixed" class="nav-glyphish-example"> 
    <div data-role="navbar" class="nav-glyphish-example" data-grid="d"> 
     <ul> 
     <li><a href="#home" id="house" data-icon="custom" class="ui-btn-active ui-state-persist">Home</a></li> 
     <li><a href="#catches" id="fishes" data-icon="custom">Catches</a></li> 
     </ul> 
    </div> 

這裏是我的CSS。

#map .ui-icon { 
    background: url(http://www.johng.com.au/work/iphone/catchmapp/icons/ico-map.png)  50% 50% no-repeat; 
    background-size: 26px 22px; 
} 
#fishes .ui-icon { 
    background: url(icons/ico-fishes.png) 50% 50% no-repeat; 
    background-size: 28px 31px; 
} 

我有沒有probleming通過的.ui-BTN活性和的.ui-BTN-懸停一個類實現按鈕活躍，在狀態上，但圖標是這裏的問題。

乾杯！

Answer 1

你必須使用懸停狀態（活躍）獨立的圖標，並使用這樣的CSS：

#map.ui-btn-hover-a .ui-icon ,#map.ui-btn-active .ui-icon{ 
    background: url(icons/ico-map-over.png)  50% 50% no-repeat; 
    background-size: 26px 22px; 
} 
#fishes.ui-btn-hover-a .ui-icon,#fishes.ui-btn-active .ui-icon { 
    background: url(icons/ico-fishes-over.png) 50% 50% no-repeat; 
    background-size: 28px 31px; 
}