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

添加此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);
}

bootstrap侧边栏折叠后悬停背景颜色

2 个答案: