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

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

干杯！

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

你如何使JQuery Mobile ui-icon活跃状态？

1 个答案: