Espero pueda ayudarme y espero también pueda darme a entender para facilitar su redacción.
Me dispuse a crear un "menú" en forma de barra, dicha barra coloqué en la parte izquierda de mi página, de tal manera que todos los "items" o botones de dicho menú estuviesen colocados uno sobre otro de manera vertical, estos botones están solamente conformados por iconos, como se pueden ver en el siguiente código:
<div class="slidebar" id="div1">
<a href="#"><i class="fa fa-home" aria-hidden="true"></i></a>
<a href="#"><i class="fas fa-comments"></i></a>
<a href="#"><i class="fas fa-shopping-cart"></i></a>
<a href="#"><i class="fas fa-tags"></i></a>
<a href="#"><i class="fas fa-sign-out-alt"></i></i></a>
</div>
[CSS]
.slidebar{
background: #04B486;
/*margin-top: 70px;
padding-top: 30px;*/
position: fixed;
left: 0;
width: 80px;
height: 100vh;
top: 0px;
padding-top: 120px;
}
.slidebar a{
width: 57px;
margin-left: 8px;
font-size: 1.5em;
color: #fff;
display: block;
padding-left: 15px;
line-height: 80px;
text-decoration: none;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.slidebar a:hover{
background: #f4f5f9;
color: #04B486;
}
El problema es que necesito que los items y abajo tengan sus respectivos bordes también al momento de hacer hover en un ítem, de manera que si hago el hover sobre cualquier ítem, el ítem de arriba tenga borres en la parte inferior izquierda, y el ítem de abajo tenga su borde en la parte superior derecha, como en la siguiente imagen:
Como pudieron darse cuenta, lo bordes de los otros "Div A" están resaltados al momento de realizar un Hover.
Espero haberme dado a entender, a su vez, también espero me puedan ayudar para poder resolver mi duda, es lo principal, lograr lo mismo que la imagen de color rosa. También agradezco aquella persona que me corrigiera la estructuración de mi código en dado caso que estuviera mal estructurado. Agradezco cada uno de sus comentarios y el apoyo también, es la primera vez que publico por aquí, espero puedan entender el desorde.