пользовательские Bootstrap 3 нав-таблетки не работают

Question

I пользовательские nav-pills для изменения фона в default, hover и focus Как это:

.nav-pills > li > a { 
    background:#FFF; 
    border-radius:0; 
    color: #777; 
    border-right:5px solid #DDD; 
    border-top:1px solid #ddd; 
    border-bottom:1px solid #ddd; 
} 
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { 
    background:#f7f7f7; 
    border-radius:0; 
    color: #777; 
    border-right:5px solid #005090; 
    border-top:1px solid #ddd; 
    border-bottom:1px solid #ddd; 
} 

Но в действии border-right не истинную работу и не показывать в 5 пикселей. как это исправить?

DEMO: http://jsfiddle.net/Sambora/2bvkd6f7/

проблема:

Answer 1

Согласно моему пониманию, вы хотите, эффекты при наведении курсора мыши тоже. У вас есть те же команды для активного, наведения и фокусировки. поэтому вы не видите разницы.

Если я прав, ваш css должен быть таким.

.nav-pills > li > a { 
    background:#FFF; 
    border-radius:0; 
    color: #777; 
    border-right:5px solid #DDD; 
    border-top:1px solid #ddd; 
    border-bottom:1px solid #ddd; 
} 
.nav-pills > li > a:hover { 
    background:#f7f7f7; 
    border-radius:0; 
    color: #777; 
    border-right:5px solid #005090; 
    border-top:1px solid #ddd; 
    border-bottom:1px solid #ddd; 
} 
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { 
    background:#f7f7f7; 
    border-radius:0; 
    color: #777; 
    border-right:5px solid #005090; 
    border-top:1px solid #ddd; 
    border-bottom:1px solid #ddd; 
} 

Answer 2

Попробуйте .nav-pills > li вместо .nav-pills > li > a. Это может быть то, что вы ищете.

\t $('#myTabs a').click(function(e) { 
 
\t e.preventDefault() 
 
\t $(this).tab('show') 
 
\t });

.book-list-cat .nav-pills > li > a { 
 
    background: #FFF; 
 
    border-radius: 0; 
 
    color: #777; 
 
    border-right: 5px solid #ddd; 
 
} 
 
.book-list-cat .nav-pills>li.active>a, 
 
.book-list-cat .nav-pills>li.active>a:hover, 
 
.book-list-cat .nav-pills>li.active>a:focus { 
 
    background: #f7f7f7; 
 
    border-radius: 0; 
 
    color: #777; 
 
    border-right: 5px solid #005090; 
 
} 
 
.book-list-cat .nav-pills > li { 
 
    border-bottom: 1px solid #ddd; 
 
    border-top: 1px solid #ddd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-md-3 book-list-cat nopadding"> 
 
    <ul class="nav nav-pills nav-stacked" id="myTabs"> 
 
    <li class="active"><a href="#home">information </a> 
 

 
    </li> 
 
    <li><a href="#profile">Profile</a> 
 

 
    </li> 
 
    <li><a href="#messages">Messages</a> 
 

 
    </li> 
 
    </ul> 
 
</div> 
 
<div class="col-md-9 book-details nopadding"> 
 
    <div class="tab-content book-details-block"> 
 
    <div class="tab-pane active" id="home">information</div> 
 
    <div class="tab-pane" id="profile">Profile</div> 
 
    <div class="tab-pane" id="messages">Messages</div> 
 
    </div> 
 
</div>