ブートストラップのサイドバーには、後に崩壊し、私は置いて、矢印の右側をクリックすると、背景色

Question

//#384a5a clear color 
//#2f3f4d dark color 

を置く：content: "\e080";光の色を取得：#384a5aを、 背景は、Liの背景と同じでなければなりません：#2f3f4d。

私は右に矢印を持っていきます。content: "\e080";別の背景を手に入れてください。

私がアーカイブしようとしているのは、矢印を右に置くと、bgの色をliと同じにします。

jsfiddle：http://jsfiddle.net/Wc4xt/4393/

HTML：

<div class="sidebar "> 
     <div class="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
      <li>test 
      </li> 
      <li> 
      <a href="test">test</a> 
      </li> 
      <li> 
      <i class="pull-left fa-lg fa fa-barcode" aria-hidden="true"></i> 
      <a href="test">test</a> 
      </li> 
      <li> 
      <div class="collapse-link"> 
       <a data-toggle="collapse" data-target="#collapseExample1" aria-expanded="true" aria-controls="collapseExample1" class="">tes 
       </a> 
      </div> 
      <div class="collapse-styled collapse in" id="collapseExample1" aria-expanded="true"> 
       <a href="test">test</a> 
       <a class="current" href="test">test</a> 
       <a href="test">test</a> 
      </div> 
      </li> 
      <li> 
      <i class="pull-left fa fa-lg fa-book" aria-hidden="true"></i> 
      <div class="collapse-link"> 
       <a data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" class="collapsed">test 
       </a> 
      </div> 
      <div class="collapse-styled collapse" id="collapseExample" aria-expanded="false" style="height: 0px;"> 
       <a href="test">test</a> 
       <a href="test">test</a> 
       <a href="test">test</a> 
      </div> 
      </li> 
      <li> 
      <i class="pull-left fa fa-map" aria-hidden="true"></i> 
      <a href="test">test 
       </a> 
      </li> 
     </ul> 
     </div> 
    </div> 

CSS：

.sidebar-wrapper { 
    height: 100%; 
    overflow-y: auto; 
    background: #384a5a; 
    -webkit-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

.sidebar-nav { 
    font-size: 0.8125em; 
} 

.sidebar-nav i { 
    margin-top: 20px; 
    margin-left: 25px; 
    color: #3181cc; 
} 

.sidebar-nav li { 
    line-height: 60px; 
    border-bottom: 1px solid #455b6f; 
} 

.sidebar-nav li:nth-child(1) { 
    color: #3181cc; 
    background-color: #273440; 
    font-size: 1.5em; 
    height: 65px; 
    text-indent: 20px; 
} 

.sidebar-nav li.current { 
    background: #000; 
} 

.sidebar-nav li.current a { 
    color: #ffffff; 
    border-right: 5px solid #000; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #ffffff; 
    border-right: 5px solid #3181cc; 
    background: #2f3f4d; 
} 

.sidebar-nav li a { 
    display: block; 
    height: 65px; 
} 

.collapse-link a { 
    background-color: #2f3f4d; 
    border-right: 5px solid #3181cc; 
} 

.collapse-link a:after { 
    font-family: 'Glyphicons Halflings'; 
    content: "\e114"; 
    float: right; 
    color: #ffffff; 
    margin-right: 20px; 
    background-color: #2f3f4d; 
} 

.collapse-link a.collapsed { 
    background-color: #384a5a; 
    border-right: 5px solid #384a5a !important; 
} 

.collapse-link a.collapsed:after { 
    font-family: 'Glyphicons Halflings'; 
    content: "\e080"; 
    background-color: #384a5a !important; 
} 

.collapse-link a.collapsed:after:hover { 
    background: #2f3f4d; 
} 

Answer 1

の作業フィドルfiddle

はこのCSSを追加します。

 .collapse-link a.collapsed:after { 
      font-family: 'Glyphicons Halflings'; 
      content: "\e080"; 
      background-color: #2f3f4d !important; 
     } 
     .sidebar-nav li a:hover:after { 
      font-family: 'Glyphicons Halflings'; 
      content: "\e080"; 
      background-color: #2f3f4d !important; 
     } 

Answer 2

このスタイルシートを使用してください

.collapse-link a.collapsed::after { 
background-color: rgba(0, 0, 0, 0); 
}