Bootstrap 引导导航列表折叠悬停问题

q9rjltbz 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(170)

当我在一个有折叠控件的导航列表中时，我似乎不能让悬停在导航标题上正常工作（突出显示列表项）。注意导航标题项必须有一个到页面的链接以及折叠控件，因此有跨度。

<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/
有什么想法吗？

谢谢-谢谢

twitter-bootstrap

来源：https://stackoverflow.com/questions/12391412/bootstrap-nav-list-collapse-hover-issue

2条答案

按热度按时间

pjngdqdw1#

<span>标记会阻止突出显示效果，因为控制这些样式的选择器是.nav-list > li > a和.nav-list > li > a:hover。
因此，您可以调整标记或使用符合您需要的选择器重新生成样式。

赞(0）回复(0）举报 2022-12-07

a14dhokn2#

我刚刚遇到了同样的问题，悬停样式在包含<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;
}

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 引导导航列表折叠悬停问题

2条答案

相关问题

热门标签

最新问答