noob-fella noob-fella - 4 days ago 6
CSS Question

bootstrap sidebar collapsed after and hover background color

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


when I hover and click the arrow right:
content: "\e080";
get light color :
#384a5a
,
the background should be the same as the li background:
#2f3f4d
.

everything it is wroking perfect just this background colour when I hover the li with arrow right:
content: "\e080";
get different background.

So what I try to archive is: make the bg colour the same as the li when I hover the arrow right.

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;
}

vel vel
Answer

Working fiddle fiddle

add this 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;
        }
Comments