Question

我有一个导航栏，其中图标是使用精灵构建的。我在精灵中有蓝色和绿色图标，但是当按钮在jquery mobile中处于.ui-btn-active状态时，我无法将图标切换为绿色。有人可以帮忙吗？以下是我尝试完成所需的结果。谢谢。史蒂芬

.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
     .nav-glyphish-example .ui-icon { width: 40px!important; height: 40px!important; margin-   left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
    #home .ui-icon{background: url(glyphish/icons/icons-gray/imagesprite.png) no-repeat center; background-position: -444px 0; width: 28px; height: 30px;}
    #home .ui-icon .ui-btn-active{background: url(glyphish/icons/icons-gray/imagesprite.png) no-repeat center; background-position: -522px 0; width: 28px; height: 30px;}

这是HTML代码：

 <div class="nav-glyphish-example ui-navbar" data-role="navbar" data-iconpos="top" data-theme="g" role="navigation" >
                    <ul class="ui-grid-d">
                        <li class="ui-block-a">
                            <a id="home" href="calendartop.html" data-theme="g" data-icon="home"  data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-inline="true"><span class="ui-btn-text">
                                Home
                            </span></a>
                        </li>
                        <li class="ui-block-b">
                            <a id="me" href="me.html" data-theme="g" data-icon="custom"  data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-inline="true" class="ui-btn ui-btn-up-g ui-btn-inline ui-btn-icon-top" ><span class="ui-btn-text">
                                Me
                            </span></a>
                        </li>
                        <li class="ui-block-c">
                            <a id="friends" href="friendshome.html" data-theme="g" data-icon="custom" class="ui-btn-active ui-state-persist ui-btn ui-btn-up-g ui-btn-inline ui-btn-icon-top" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-inline="true" ><span class="ui-btn-text">
                                Friends
                            </span></a>
                        </li>
                        <li class="ui-block-d">
                            <a id="companies" href="companyhome.html" data-theme="g" data-icon="custom"  data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-inline="true" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-up-g"><span class="ui-btn-text">
                                Companies
                            </span></a>
                        </li>
                        <li class="ui-block-e">
                            <a id="invites" href="eventhome.html" data-theme="g" data-icon="custom" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-inline="true" class="ui-btn ui-btn-up-g ui-btn-inline ui-btn-icon-top"><span class="ui-btn-text">
                                Invites
                            </span></a>
                        </li>
                    </ul>
                </div>

Answer 1

您需要将最后一个选择器更改为#home .ui-icon.ui-btn-active。也就是说，假设图标的标记通常类似于<a class="ui-icon">，并且在激活时变为<a class="ui-icon ui-btn-active">。

为简化CSS，第二条规则可以是

#home .ui-icon .ui-btn-active{
    background-position: -522px 0;
}

因为其他东西保持不变。

图像精灵 - 导航栏

1 个答案: