Al passaggio del mouse come posso rendere il bordo figlio sovrapposto al bordo padre?

Question

Ho un genitore con bordo rosso. Quando l'utente si posiziona sui bambini, sto cercando di cambiare il bordo dei bambini per sovrapporre il genitore. Come posso raggiungere questo obiettivo?

.parent{ 
 
    border:1px solid red; 
 
    display:inline-block; 
 
} 
 

 
.parent a { 
 
    display:block; 
 
    padding:1em; 
 
    border-bottom:1px solid #ddd; 
 
} 
 

 
.parent a:hover{ 
 
    border:1px solid #ddd; 
 
}

<div class="parent"> 
 
     <a href="#">1</a> 
 
     <a href="#">2</a> 
 
     <a href="#">3</a> 
 
     <a href="#">4</a> 
 
     <a href="#">5</a> 
 
    </div>

Answer 1

Finché si conosce la larghezza dei confini e sono in grado di utilizzare il posizionamento relativo ... Ho esagera qui i confini per chiarezza.

.parent { 
    border:5px solid red; 
    display:inline-block; 
    position: relative; 
} 

.parent a { 
    display:block; 
    padding:1em; 
    border-bottom:1px solid #ddd; 
    position: relative; 
} 

.parent a:hover{ 
    border:5px solid #ddd; 
    margin: -5px; 
} 

https://jsfiddle.net/kd0gf31z/

Answer 2

.parent a:hover{ 
    border:1px solid #ddd; 
    width:120%; 
} 

https://jsfiddle.net/9Lmwp0e7/

qualcosa di simile?

Answer 3

ho fatto alcuni cambiamenti sul vostro stile:

.parent{ 
    display:inline-block; 
} 

.parent a { 
    display:block; 
    padding:1em; 
    border-right:1px solid red; 
    border-left:1px solid red; 
    border-bottom:1px solid #ddd; 
    border-top: none; 
} 

.parent a:first-of-type{ 
    border-top:1px solid red; 
} 

.parent a:last-of-type{ 
    border-bottom:1px solid red; 
} 

.parent a:hover{ 
    border-color:#ddd; 
} 

vedere il risultato qui https://jsfiddle.net/IA7medd/343ydvhs/

Answer 4

Perché non basta cambiare il CSS genitore sul hover bambino?

.parent a:hover .parent { 
//Some CSS 
} 

Answer 5

Si potrebbe raggiungere questo obiettivo attraverso l'uso di elementi pseudo posizionati in modo assoluto, in questo modo:

*,*::before,*::after{box-sizing:border-box;font-family:sans-serif;} 
 
.parent{ 
 
    border:1px solid red; 
 
    display:inline-block; 
 
} 
 
.parent a{ 
 
    display:block; 
 
    padding:1em; 
 
    border-bottom:1px solid #ddd; 
 
    position:relative; 
 
} 
 
.parent a:last-child{ 
 
    border:0; 
 
} 
 
.parent a:hover::after{ 
 
    border:1px solid #ddd; 
 
    bottom:-1px; 
 
    content:""; 
 
    left:-1px; 
 
    position:absolute; 
 
    right:-1px; 
 
    top:-1px; 
 
}

<div class="parent"> 
 
    <a href="#">1</a> 
 
    <a href="#">2</a> 
 
    <a href="#">3</a> 
 
    <a href="#">4</a> 
 
    <a href="#">5</a> 
 
</div>