Jquery mobile 如何使JQuery移动用户界面图标处于活动状态？

我正在使用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>

我在通过.ui-btn-active和.ui-btn-hover-a类实现按钮的active和over状态方面没有问题，但是图标是这里的问题

---

干杯，小伙子们

您必须为悬停状态（和活动状态）使用单独的图标，并使用如下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;
}

---

非常感谢！很好用！

#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;
}