0

スプライトを使用してアイコンを作成するナビゲーションバーがあります。スプライトに青と緑のアイコンがありますが、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>
4

1 に答える 1

1

最後のセレクターをに変更する必要があります#home .ui-icon.ui-btn-active。つまり、アイコンのタグは通常、のようなものであり、アクティブ<a class="ui-icon">になるとになります。<a class="ui-icon ui-btn-active">

CSSを単純化するために、2番目のルールは次のようになります。

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

他のものは同じままなので。

于 2012-08-29T01:20:49.833 に答える