olá, gostaria de saber como eu estilizo a barra de rolagem dessa div, e outra coisa, ao passar o nome sobre os nomes o efeito hover dele abre uma div para esquerda, depois que eu coloquei nessa div que segura os nomes overflow: auto
não funciona o efeito hover dela que seria mostrar a outra div, quando eu tiro o overflow: auto
funciona normalmente, alguém pode me ajudar ? oque estou fazendo de errado ? http://prntscr.com/ip0jju
#usuarios {
position: relative;
width: 200px;
height: 364px;
max-height: 364px;
overflow: auto;
border: 3px solid #c9c9c9;
}
::-webkit-scrollbar #usuarios {
width: 10px;
}
::-webkit-scrollbar-button #usuarios {
width: 10px;
}
::-webkit-scrollbar-track #usuarios {
width: 10px;
}
::-webkit-scrollbar-track-piece#usuarios {
width: 10px;
}
::-webkit-scrollbar-thumb #usuarios {
width: 10px;
}
::-webkit-scrollbar-corner #usuarios {
width: 10px;
}
::-webkit-resizer #usuarios ul li {
position: relative;
}
#usuarios ul li:first-child {
margin: 5px 0 0 0;
font-weight: bold;
}
#usuarios ul li:last-child {
margin: 0 0 5px 0;
}
#usuarios ul li a {
display: block;
margin: 0 5px;
padding: 0 5px;
height: 25px;
line-height: 26px;
font-weight: bold;
font-size: 12px;
text-transform: capitalize;
color: #000;
}
#usuarios ul li .admin {
margin: 0 5px 5px 5px;
background-color: rgba(255, 255, 255, 0.8);
}
#usuarios ul li:hover .admin {
border-radius: 10px;
}
#usuarios ul li:hover a {
background-color: rgba(255, 255, 255, 0.8);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#usuarios ul li:hover a span {
opacity: .95;
}
#usuarios ul li a span {
display: block;
margin: 4px 0 0 0;
width: 18px;
height: 18px;
line-height: 19px;
text-align: center;
font-size: 7px;
font-weight: bold;
color: #fff;
opacity: .60;
border-radius: 50%;
}
#usuarios ul li .on {
color: green;
}
#usuarios ul li .aus {
color: orange;
}
#usuarios ul li .off {
color: #ff0000;
}
#usuarios ul li a .on {
color: #fff;
background-color: green;
}
#usuarios ul li a .aus {
color: #fff;
background-color: orange;
}
#usuarios ul li a .off {
color: #fff;
background-color: #ff0000;
}
#usuarios ul li ul li .perfil {
display: none;
}
#usuarios ul li:hover ul li .perfil {
display: block;
z-index: 9999;
position: absolute;
left: -215px;
top: -35px;
width: 200px;
}
#usuarios ul li:hover ul li .perfil .box_perfil {
width: 196px;
height: 200px;
border: 3px solid #000;
background-color: rgba(0, 0, 0, 0.5);
}
<div id="usuarios" class="usuarios align_right border-radius rgba">
<ul>
<li><a href="javascript:void(0)" class="on admin border-radius">Admin <span class="on align_right">ON</span></a>
<ul>
<li>
<div class="perfil">
<div class="box_perfil"></div>
</div>
</li>
</ul>
</li>
<li><a href="javascript:void(0)" class="on">Amanda <span class="on align_right">ON</span></a></li>
<li><a href="javascript:void(0)" class="on">Joana <span class="on align_right">ON</span></a></li>
<li><a href="javascript:void(0)" class="on">Pedro <span class="on align_right">ON</span></a></li>
<li><a href="javascript:void(0)" class="on">Bruna <span class="on align_right">ON</span></a></li>
<li><a href="javascript:void(0)" class="on">Lohana <span class="on align_right">ON</span></a></li>
<li><a href="javascript:void(0)" class="on">Julio <span class="on align_right">ON</span></a></li>
<li><a href="javascript:void(0)" class="aus">Amanda <span class="aus align_right">AUS</span></a></li>
<li><a href="javascript:void(0)" class="aus">Felipe <span class="aus align_right">AUS</span></a></li>
<li><a href="javascript:void(0)" class="aus">Igor <span class="aus align_right">AUS</span></a></li>
<li><a href="javascript:void(0)" class="off">Lucas <span class="off align_right">OFF</span></a></li>
<li><a href="javascript:void(0)" class="off">Amanda <span class="off align_right">OFF</span></a></li>
<li><a href="javascript:void(0)" class="off">Bruna <span class="off align_right">OFF</span></a></li>
<li><a href="javascript:void(0)" class="off">Jéssica <span class="off align_right">OFF</span></a></li>
</ul>
</div>
hover
pra ficar com as respostas mais focadas