在悬停我怎么能让我的孩子边界重叠父母的边界？

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>