En teoría el outline es una banda alrededor de un CSS box que no ocupa espacio y si no me equivoco queda por encima de la página ocultando lo que haya debajo. Por ejemplo:
<style>
.container{
display: table;
border-spacing: 2px;
}
.box{
display: table-cell;
width: 200px
}
.outline:hover{
outline: 40px solid rgb(0, 195, 255, 0.5);
outline-offset: 4px;
} .content {
background-color: lightgray;
padding: 4px;
}
</style>
<div class="container">
<div class="box">
<div class="content"> ctw-boxizquierda </div>
</div>
<div class="box outline">
<div class="content "> Pasa el ratón</div>
</div>
<div class="box">
<div class="content"> ctw-boxderecha </div>
</div>
</div>
Al pasar el ratón por la celda central se ve un outline cubriendo parte de las celdas laterales.
Pero si usamos flex:
<style>
.container{
display: flex;
border-spacing: 2px;
}
.box{
margin: 2px 2px;
width: 200px
}
.outline:hover{
outline: 40px solid rgb(0, 195, 255, 0.5);
outline-offset: 4px;
}
.content {
background-color: lightgray;
padding: 4px;
}
</style>
<div class="container">
<div class="box">
<div class="content"> ctw-boxizquierda </div>
</div>
<div class="box outline">
<div class="content "> Pasa el ratón</div>
</div>
<div class="box">
<div class="content"> ctw-boxderecha </div>
</div>
</div>
Ahora al pasar el ratón por la celda central el outline cubre la celda izquierda pero queda por debajo de la derecha.
Igual ocurre si las box se ponen con display inline-block (sin flex en el container).
¿Alguien sabe porqué ocurre esto?
No le veo sentido, parece un error de implementación, o estoy interpretando mal el comportamiento de outline