在懸停我怎麼能讓我的孩子邊界重疊父母的邊界？

Question

我有一個有紅色邊框的父母。當用戶懸停在孩子身上時，我試圖改變孩子的邊界以重疊父母。我怎樣才能做到這一點？

.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

只要你知道邊框的寬度，並能使用相對定位...我有爲了清楚起見，在這裏誇大了邊界。

.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/

像這樣的事情？

Answer 3

我做了你的風格有些變化：

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

在這裏看到的結果https://jsfiddle.net/IA7medd/343ydvhs/

Answer 4

爲什麼不只是改變孩子懸停父CSS？

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

Answer 5

您可以通過使用絕對定位僞元素實現這一點，就像這樣：

*,*::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>