css - Bootstrap 侧边栏在悬停背景颜色后折叠

Question

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

当我悬停并单击向右箭头时:content: "\e080"; 获得浅色:#384a5a，背景应该与 li 背景相同:#2f3f4d。

当我将 li 与右箭头悬停时，一切都非常完美，只是这个背景颜色: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 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;
        }