2

折りたたみコントロールもあるnav-list内で、nav-headerでホバーが正しく機能（リスト項目を強調表示）するように見えません。nav-headerアイテムには、ページへのリンクと折りたたみコントロール、つまりスパンが必要であることに注意してください。

<ul class="nav nav-list">
<li class="nav-header">
    <span>
        <a href="/" title=""><i class="icon-home"></i>Home</a>
        <span class="caret pull-right" data-target="#test" data-toggle="collapse"></span>
    </span>
    <ul class="nav nav-list collapse in" id="test" >
        <li><a href="/ticket_list.cfm" title="Show list of tickets">Open Tickets</a></li>
        <li><a href="/account/" title="Edit user accounts">Accounts / Community</a></li>
    </ul>
</li>
</ul>

http://jsfiddle.net/awjreynolds/2Aucc/3/

何か案は？

ありがとうございました。

4

2 に答える 2

0

これらのスタイルを制御するセレクターはとであるため、この<span>タグはハイライト効果を妨げています。 したがって、マークアップを調整したり、ニーズに合ったセレクターを使用してそのスタイルを再現したりできます。.nav-list > li > a.nav-list > li > a:hover

于 2012-09-12T15:50:43.227 に答える
0

.を含む nav-list でホバー スタイルが機能しないという同じ問題が発生しました<span>。元の投稿で提起された問題に加え.activeて<li>、<span>. ケースを処理するこのバージョンを取得するために、awjr が到達した css を拡張しましたclass="active"。

これが動作中のjsfiddle http://jsfiddle.net/sazerac08/bKSJs/4/です

/* fix bootsrap nav-list containing a span */
.nav > li > span:hover {
    text-decoration: none;
    background-color: #EEE;
}
.nav-list > .active > span, .nav-list > .active > span:hover, .nav-list > .active > span:focus {
    text-decoration: none;
    background-color: #0088cc;
}
.nav-list > .active > span > a {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.nav > li > span {
    display: block;
}
.nav-list > li > span > a {
    text-decoration: none;
}
.nav-list > li > span {
    margin-right: -15px;
    margin-left: -15px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list > li > span {
    padding: 3px 15px;
}
于 2013-05-17T21:43:49.003 に答える