引导导航列表折叠悬停问题答案

【问题标题】：bootstrap nav-list collapse hover issue引导导航列表折叠悬停问题
【发布时间】：2012-09-05 15:56:49
【问题描述】：

在我也有折叠控件的导航列表中时，我似乎无法让悬停在导航标题上正常运行（突出显示列表项）。请注意，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/

有什么想法吗？

谢谢。

【问题讨论】：

在 chrome 上似乎可以正常工作。

标签： twitter-bootstrap navigation collapse nav

【解决方案1】：

<span>tag 阻止了高亮效果，因为控制这些样式的选择器是 .nav-list > li > a 和 .nav-list > li > a:hover。
因此，您可以使用适合您需求的选择器来调整您的标记或重现该样式。

【讨论】：

感谢以上css解决了这个问题：.nav > li > span:hover { text-decoration: none; background-color: #EEE; } .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; }link

【解决方案2】：

我刚刚遇到了悬停样式在包含<span> 的导航列表中不起作用的相同问题。除了原始帖子提出的问题外，如果 <li> 包含 <span>，.active 样式根本不起作用。我扩展了 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;
}

【讨论】：