Блог

Я создаю простое веб-приложение с помощью jQuery Mobile. Я использую пользовательские значки на панели навигации в нижнем колонтитуле. Мне интересно, возможно ли сделать активные состояния и состояния наведения для значков (не кнопок). Вот мой 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;
}
  

У меня не возникло проблем с реализацией состояний button active и over через классы .ui-btn-active и .ui-btn-hover-a, но проблема здесь в значках.

Приветствую, ребята!

Вы должны использовать отдельные значки для состояния наведения (и active) и использовать 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;
}